(Pseudo) selectors let you assign styles to what are, in effect, phantom classes that are inferred by the state of certain elements, or markup patterns within the document, or even by the state of the document itself.
— CSS: The Definitive Guide: Eric Meyer, Estelle Weyl
This post is a sort-of encouragement to use more plain CSS and less JS when building your UI. Getting familiar with everything CSS has to offer is one way to achieving that — another one is implementing best practices and reusing that code, as much as possible.
Pseudo-Selectors are in categories: Pseudo-Classes and Pseudo-Elements.
Pseudo-Class acts as if a class has been attached to an element and styles the element on that basis, whereas a Pseudo-Element acts as if an element has been injected into another element and just the injected element is styled.
Pseudo-Classes has double colons :: while Pseudo-Elements has a single colon :.
To reuse your UI components try using cloud component hubs like Bit.dev. Use it to publish, document and organize all your team’s reusable UI components. It’s not only a way to build faster but also a way to build better as it encourages you to standardize and modularize your code.
This pseudo selector affects the first line of text before a line breaks. It styles just the first line of text inside it, as if an element was wrapped around just that text.
p:first-line {
color: lightcoral;
}
::first-letter | Selects the first letter
This pseudo selector applies to the first letter of the text in an element.
::selection | Selects the highlighted (selected) area
This applies to any area that has been highlighted by the user.
With the ::selection pseudo-selector, we can apply our styling to the area that we highlight.
div::selection {
background: yellow;
}
:root | Basic element
The :root pseudo-class selects the root element of the document. In HTML, it is always the HTML element. In RSS, it is the RSS element.
This pseudo selector is most used to store global rule values using CSS variable as it applies to the root element.
:empty | Applies only if the item is empty
This pseudo selector will select any element that has no children of any kind. The element must be empty. An element is empty if it has no whitespace, visible content, or descendant elements.
The rule will apply to empty div elements. The rule will be applied to the first and second div because they are truly empty, not the third div because it has whitespace.
:only-child | Selects an only child
This applies to an element that is the only child of its parent element.
.innerDiv p:only-child {
color: orangered;
}
:first-of-type | Selects the first child element of a specified type
p:first-of-type {
color: orangered;
}
This will select any paragraph which is the first paragraph inside another element, as if a class had been added to the paragraph itself.
.innerDiv p:first-of-type {
color: orangered;
}
This would apply to the first child of .innerDiv of p paragraph element.
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
The p ("These are the necessary step") would be selected.
:last-of-type | Selects the last child element of a specified type
Same as :first-of-type, but this will affect the last child element of the same type.
.innerDiv p:last-of-type {
color: orangered;
}
This would apply to the last child of innerDiv of type p paragraph element.
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
So, the p element ("Do the same") would be selected.
:nth-of-type() | Selects the child element of a specified type
This selector would select an element of a certain type from the list of the specified parent element.
.innerDiv p:nth-of-type(1) {
color: orangered;
}
:nth-last-of-type() | Selects the child element of a type by the end of a list
This will select the last child element of a certain type.
This will make all a anchor elements with a href attribute that has not been clicked to visit the page in its href attribute to have an orangered color text.
:checked | Selects a checked checkbox
This applies to checkbox that has been checked.
input:checked {
border: 2px solid lightcoral;
}
This rule applies to all checkboxes that have been clicked on to check it.
:valid | Selects an element that is valid
This is mostly used in forms to visualize form elements that pass validation set by the user. When a validation passes, the defaulting element is set with the valid attribute.
input:valid {
boder-color: lightsalmon;
}
:invalid | Selects an element that is invalid
Same as :valid but this will apply to elements that have failed the validation test.
input[type="text"]:invalid {
border-color: red;
}
:lang() | Selects an element by a specified lang value
This applies to elements that have their language specified.
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptRead More
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.