How Do I Target State On A Page In CSS?
When someone visits your web page and performs certain actions, like hovering the mouse over a link, in the background the web browser dynamically applies different 'state'. This 'state management' is done by the browser by applying something called a pseudo-state to the element.
How the browser applies state is pretty boring, however, as a frontend developer you can use these different states/pseudo-classes to change the style of your elements depending on the state. In the example above, when you hover your mouse over a link the browser will apply the 'hover' pseudo-class to that link. You can then write a CSS selector to target the link in hover state to say apply an underline.
Pseudo-classes should hopefully be fairly simple to grasp. There are loads of pseudo-classes available that allow you to target a whole host of different actions and states.
All CSS Pseudo Classes
|:active||a:active||Selects the active link|
|:checked||input:checked||Selects every checked <input> element|
|:disabled||input:disabled||Selects every disabled <input> element|
|:empty||p:empty||Selects every <p> element that has no children|
|:enabled||input:enabled||Selects every enabled <input> element|
|:first-child||p:first-child||Selects every <p> elements that is the first child of its parent|
|:first-of-type||p:first-of-type||Selects every <p> element that is the first <p> element of its parent|
|:focus||input:focus||Selects the <input> element that has focus|
|:hover||a:hover||Selects links on mouse over|
|:in-range||input:in-range||Selects <input> elements with a value within a specified range|
|:invalid||input:invalid||Selects all <input> elements with an invalid value|
|:lang(language)||p:lang(it)||Selects every <p> element with a lang attribute value starting with "it"|
|:last-child||p:last-child||Selects every <p> elements that is the last child of its parent|
|:last-of-type||p:last-of-type||Selects every <p> element that is the last <p> element of its parent|
|:link||a:link||Selects all unvisited links|
|:not(selector)||:not(p)||Selects every element that is not a <p> element|
|:nth-child(n)||p:nth-child(2)||Selects every <p> element that is the second child of its parent|
|:nth-last-child(n)||p:nth-last-child(2)||Selects every <p> element that is the second child of its parent, counting from the last child|
|:nth-last-of-type(n)||p:nth-last-of-type(2)||Selects every <p> element that is the second <p> element of its parent, counting from the last child|
|:nth-of-type(n)||p:nth-of-type(2)||Selects every <p> element that is the second <p> element of its parent|
|:only-of-type||p:only-of-type||Selects every <p> element that is the only <p> element of its parent|
|:only-child||p:only-child||Selects every <p> element that is the only child of its parent|
|:optional||input:optional||Selects <input> elements with no "required" attribute|
|:out-of-range||input:out-of-range||Selects <input> elements with a value outside a specified range|
|:read-only||input:read-only||Selects <input> elements with a "readonly" attribute specified|
|:read-write||input:read-write||Selects <input> elements with no "readonly" attribute|
|:required||input:required||Selects <input> elements with a "required" attribute specified|
|:root||root||Selects the document's root element|
|:target||#news:target||Selects the current active #news element (clicked on a URL containing that anchor name)|
|:valid||input:valid||Selects all <input> elements with a valid value|
|:visited||a:visited||Selects all visited links|
To write a selector that targets a pseudo-class, you first proceed the state with a semi-colon, followed by the name of the pseudo-class then your styles.
A few common pseudo-classes are :link, :visited, :hover, :active, :first-child and :nth-child. There are more, and we’re going to see them all in a minute.
What are CSS Pseudo Elements?
The :first-child Pseudo-class
All CSS Pseudo Elements
|::after||p::after||Insert content after every <p> element|
|::before||p::before||Insert content before every <p> element|
|::first-letter||p::first-letter||Selects the first letter of every <p> element|
|::first-line||p::first-line||Selects the first line of every <p> element|
|::selection||p::selection||Selects the portion of an element that is selected by a user|