Photo by Anna Kolosyuk on Unsplash
Understanding Pseudo-classes and Pseudo-elements in CSS
Pseudo-classes and pseudo-elements explained with examples
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
Applies styles when the mouse pointer is over an element.
Useful for creating interactive and responsive hover effects.
: active
Applies styles to an element when it's being actively clicked or selected.
Often used to give visual feedback when a user clicks a button or link.
: focus
Applies styles to an element that currently has a keyboard focus.
Commonly used for styling form elements like input fields when they are selected or focused.
: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
:not(selector)
Selects elements that do not match a specified selector.
Useful for applying styles to elements that meet certain criteria while excluding others.
:first-child
Targets the first child element of its parent.
Helpful for styling the first item in a list or a specific element at the beginning of a container.
:last-child
Targets the last child element of its parent.
Useful for styling the last item in a list or a specific element at the end of a container.
: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
Applies styles to radio buttons or checkboxes that are checked.
Enables customization of the appearance of selected options in forms.
: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
::after
Similar to
::before
, but it inserts content after the content of the selected element.Often used for adding additional content or icons after text.
::first-line
Targets the first line of text within a block-level element.
Useful for applying styles like font size or color to the initial line of text in a paragraph.
::first-letter
Targets the first letter of the text within a block-level element.
Often used for creating drop caps or applying unique styles to the first letter of a paragraph.
::selection
Selects and styles the portion of text that a user highlights with their cursor.
Useful for customizing the appearance of selected text on a webpage.
::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.
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.
Google Chrome, DevTools and Pseudo Classes
Open DevTools:
- Right-click on an element on a page, and select 'Inspect' or press
Ctrl + Shift + I
(Windows/Linux) orCmd + Opt + I
(Mac) to open the DevTools.
- Right-click on an element on a page, and select 'Inspect' or press
Select an element:
- Click on the 'Select an element' icon or press
Ctrl + Shift + C
(Windows/Linux) orCmd + Shift + C
(Mac) to activate the element selection mode, then click on the element you are interested in on the page.
- Click on the 'Select an element' icon or press
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.
<!-- Tailwind CSS -->
<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:
Pseudo-classes, like
:hover
,:focus
,:first-child
, and:required
Pseudo-elements, like
::before
,::after
,::placeholder
, and::selection
Special Links for pseudo-classes and pseudo-elements
W3 Schools links
Helpful YouTube videos
Tailwind
Code Pen Examples