Pseudo-classes are used to define a special state of an element using CSS. There are (in late 2023) around 30 pseudo-classes. Pseudo-elements are called pseudo-elements because they do not exist in the DOM. While there are too many to go into in detail, we do give a top ten list of examples below. However, to quickly understand the idea, say for example we would like to change the background color of a button when we hover on it or while the button is active then we would use a pseudo-class. We could change the color of a button while hovering programmatically with Javascript but pseudo-classes make this process much easier using CSS.
Top ten most popular pseudo-classes and what they do
: hover
: active
: focus
:nth-child(n)
Selects elements based on their position within a parent element.
Allows for targeting specific child elements in a list or group.
Could use "even" or "odd" to select only even or odd items in an unordered list
Example: https://codepen.io/fieldsmarshall/pen/RwEJxoe
:not(selector)
:first-child
:last-child
:nth-of-type(n)
Selects elements based on their position within their parent element, considering only elements of the same type.
Allows for more precise targeting of specific child elements.
:checked
:enabled and :disabled
:enabled selects form elements that are currently interactive or enabled for user input.
:disabled select form elements that are currently inactive or disabled.
Useful for changing the appearance of form fields based on their state.
Reminder: These pseudo-classes offer a way to apply styles to elements based on their state, position, or relationship to other elements, enhancing the styling and behavior of web pages.
Pseudo-Classes vs Pseudo-elements
Pseudo-elements are like pseudo-classes except they don't target a specific state instead they target a sub-element.
Pseudo-elements use a double colon
Pseudo-elements can inject content and style that content ( before and after pseudo-elements)
There are only 6 pseudo-elements versus around 30 pseudo-classes
All Pseudo-Elements and their common usage
::before
Allows you to insert content before the content of the selected element.
Commonly used for decorative elements or icons before the text.
Can be used for background image overlays
Example: https://codepen.io/fieldsmarshall/pen/poqKpQR
::after
::first-line
::first-letter
::selection
::placeholder
Applies styles to the placeholder text inside an input or textarea element.
Useful for changing the color, font, or other properties of the input field's placeholder text.
Example: https://codepen.io/fieldsmarshall/pen/dywKdGE
Debugging Pseudo Elements and Pseudo-Classes with Chrome and Firefox
Debugging CSS pseudo-classes and pseudo-elements can be tricky unless you use DevTools on Chrome or Firefox.
Open DevTools:
- Right-click on an element on a page, and select 'Inspect' or press
Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac) to open the DevTools.
Select an element:
- Click on the 'Select an element' icon or press
Ctrl + Shift + C (Windows/Linux) or Cmd + Shift + C (Mac) to activate the element selection mode, then click on the element you are interested in on the page.
Inspect Pseudo-classes:
In the "Elements" panel, you can find the "Styles" tab on the right side.
Here, you will find a :hov button, clicking this button will allow you to toggle various pseudo-classes like :hover, :active, :focus, etc.
Inspect Pseudo-elements:
In the same "Styles" tab, you can scroll down to find the pseudo-elements ::before and ::after.
Here you can see the styles applied to these pseudo-elements and edit them to see changes in real time.
Tailwind, Bootstrap, pseudo-classes and pseudo-elements
Tailwind makes using pseudo-classes and pseudo-elements easy whereas Bootstrap does pretty much nothing in this regard.
Tailwind and pseudo-classes
Tailwind provides explicit control over pseudo-classes directly within your markup. By using utility classes, developers can apply styles for different states like :hover, :focus, :active, etc., directly to the elements. This explicit control makes it clear at a glance what styles are being applied and under which circumstances.
<button class="hover:bg-blue-500 focus:outline-none">Click me</button>
Above we have an example where hovering will make the background blue and focusing (clicking on the button) will remove the outline.
Tailwind includes modifiers for just about everything you’ll ever need, including:
Special Links for pseudo-classes and pseudo-elements
W3 Schools links
Helpful YouTube videos
Tailwind
Code Pen Examples
