Guide: CSS Pseudo-Classes: Complete Guide
Whether you’re a beginner or an experienced CSS developer, you’ve probably heard of it pseudo classesProbably the most famous pseudo class is hover, which allows us to style an element when it’s in the floating stateie when a pointing device, such as a mouse, is pointed at it. Following the concept of our earlier posts on margin: auto and CSS Floats, we’ll take a closer look at pseudo classes in this post. We shall see what pseudo classes really are, how they work, how we can categorize them, and how they differ from pseudo-elements
What are Pseudo Classes?
A pseudo-class is a keyword that we can add to CSS selectors for define a special state of the corresponding HTML element. We can add a pseudo class to a CSS selector by using the colon syntax : like this: a: hover {…} A CSS class is an attribute that we can add to HTML elements for which we want to apply the same style rules, such as top menu items or sidebar widget titles. In other words, we can use CSS classes to convert Group or classify HTML elements that are somehow similar. Pseudo-classes are similar to them in the sense that they are used to add style rules to the elements that share the same attribute But while real classes are user-defined and can be seen in the source code, for example For example, if a developer decides to use a However, HTML elements have their own common features based on their state, position, nature and interaction with the page and the user. These are the characteristics that are not typically marked in the HTML code, but we can target them with pseudo classes in CSS, for example:
an element that is the last child within the parent element a link that is visited an element that has disappeared in full screen.
These are the kind of characteristics that the pseudoclasses are usually targeted at. To better understand the difference between classes and pseudo-classes, let’s assume we use the class .last to identify the last elements in different parent containers.
item 1 item 2 item 3 item 4
option 1 option 2 option 3 option 4
We can style these last child elements with the following CSS:
li.last {text-transform: capital letters;}
option.last {font-style: italic;}
But what happens if the last element changes? Well, we will have to move the class .last from the previous last element to the current one.
This hassle of updating classes can be left to the user agent, at least for those characteristics that are common among elements (and being the last element is as common as it can get). To have a predefined: last-child pseudo-class is very useful indeed. In this way we can does not have to indicate the last element in the HTML code, but we can still format them with the following CSS:
li: last-child {text-transform: capital letters;}
option: last-child {font-style: italic;}
Main types of pseudo classes
There are many types of pseudo classes, they all provide us with ways to target elements based on their features that are otherwise inaccessible or more difficult to access. Here is a list of standard pseudoclasses in MDN.
1. Dynamic pseudo classes
Dynamic pseudo classes are added to and removed from HTML elements dynamic, based on the state into which they pass in response to the user’s interactionsSome examples of dynamic pseudoclasses are: hover ,: focus ,: link, and: seen, all of which can be added to the anchor tag. a: visited {color: # 8D20AE;}.button: float ,.button: focus {font-weight: bold;}
2. State-based pseudo-classes
State-based pseudo-classes are added to elements when they are in a certain static stateSome of the most famous examples are:
: checked that can be applied for checkboxes () : full screen to target any element currently displayed in full screen : Disabled for HTML elements that can be in disabled mode, such as , andbutton
The most popular state-based pseudo-class should be: checked, which indicates whether a check box is checked or not. .checkbox: checked + label {font-style: italic;} input: disabled {background color: #EEEEEE;}
3. Structural pseudo classes
Structural pseudo-classes classify elements based on on their position in the document structureThe most common examples are: first-child ,: last-child, and: nth-child (n) – they can all be used to target a specific child element in a container based on its position – and : root that targets the top-level parent in the DOM.
4. Various pseudo classes
There are also several pseudo classes that are difficult to classify, such as:
: not (x) that selects elements that do not match the selector x : lang (language code) that selects elements whose content is in a specific language : dir (directionality) that selects elements with content of a certain directionality (from left to right or from right to left).
p: long (ko) {background color: # FFFF00;}: root {background color: # FAEBD7;}
n-child versus n-th type Pseudo-classes
Probably one of the most difficult things about pseudo classes is understanding the difference between the: nth-child and: nth-of-type pseudo classes. Both are structural pseudo classes and mark a specific element within a parent element (container), but in a different way. Suppose n is 2, then: nth-of-child (n) targets an element containing the second child of the parent, and: nth-of-type (s) targets the second of the same type of element (such as paragraphs) within a parent element Let’s take an example. / * a paragraph that is also the second child within the parent * / p: nth-child (2) {color: # 1E90FF; // light blue} / * the second paragraph within a parent * / p: nth-of-type (2) {font-weight: bold;} Let’s take a look at how this short CSS formats the HTML in two different cases.
Case 1
In Case 1, the second element is within one elements and doesn’t care about other types of elements (such as unordered lists) within the parent element. In our example, the nth-of-type (2) rule will format the style of the second paragraph, which is Child 3. <! - Case 1 ->
Unordered list 1, child 2
Paragraph 2, child 3 div >
Case 2
In the second case, we move the unordered list to the third place and the second paragraph comes before it. This means that both the: nth-child (2) and: nth-of-type (2) rules will be applied, since the second paragraph is also the second child of the parent Paragraph 2, child 2
Unordered list 1, child 3
div >
If you want to read more about the differences between the: nth-of-child and: nth-of-type pseudo-classes, CSS Tricks has a great post on it. If you are using SASS, Family.scss can help you create complicated n-kind elements.
Pseudo Classes vs Pseudo Elements
When we talk about pseudoclasses, it is also important to understand how they differ from pseudo-elements, so as not to mix them up Pseudo-elements, such as :: before and :: after (see this tutorial On how to use them) are too added by user agents, and they can be targeted and styled with CSS as well as pseudo classes. But while we use pseudo classes to select HTML elements that exist in the document tree just not individually marked, pseudo-elements allow us to target those elements normally do not exist in the DOM, either entirely (eg :: before and :: after) or only as certain parts of existing elements (eg :: first letter or :: placeholder). There also is a difference in syntaxPseudo-elements are generally identified with colons ::, while pseudo-classes are identified with a single colon :. This can lead to confusion as in CSS2 pseudo-elements were also marked with a single colon – browsers still accept the single-colon syntax for pseudo-elements. There are also differences between pseudo classes and pseudo elements in the way we can target them with CSS
1. Their place in the CSS selection string
Pseudo elements can only appear after the array of selectors, while pseudo classes can be placed anywhere in the CSS selector array. For example, you can enter the last list item of a list element such as OR ul> .red: last-child {color: # B0171F;} The first set of the selector selects the last child within it ul> .red :: na {display: block; content: ‘red’; color: # B0171F;} The above CSS code is valid and the text “red” will appear after the ul> :: after.red {display: block; content: ‘red’; color: # B0171F;}
2. Number of occurrences in a selection set
- Also, only one pseudo element can appear next to a selector, while pseudo classes can be combined with each other if the combination is correct. For example, to target first children that are also read-only, we can make a combination of the pseudo-classes: first-child and: read-only in the following way:
- first-child: read-only {color: #EEEEEE;}
jQuery Selector extensions
Selector code with a: syntax does not always make a good CSS pseudo class. If you’ve ever used jQuery, you may have used many of its selectors with: syntax, for example $ (‘: checkbox’), $ (‘: input’), and $ (‘: selected’). It is important to know that these are not CSS pseudo classes targeted by jQuery. They are called jQuery selector extensions. With jQuery selector extensions you can target HTML elements with simpler keywordsMost are combinations of multiple normal CSS selectors, displayed with a single keyword. / * Change the font of all input related HTML elements, such as button, select and enter * / $ (“: Input”) .css (“font-family”, “courier new”)
CSS Pseudo-Classes: Complete Guide: benefits
Faq
Final note
I hope you like the guide CSS Pseudo-Classes: Complete Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the CSS Pseudo-Classes: Complete Guide, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “CSS Pseudo-Classes: Complete Guide”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide CSS Pseudo-Classes: Complete Guide, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel. Compsmag has Proudly Shared Free Information Since 2014.
