Understanding Pseudo-classes and Pseudo-elements in CSS

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

1. : hover

   • Applies styles when the mouse pointer is over an element.

   • Useful for creating interactive and responsive hover effects.

   • Example: https://codepen.io/fieldsmarshall/pen/zYyaPXK

2. : 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.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezXKV

3. : 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.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezXWV

4. :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

5. :not(selector)

   • Selects elements that do not match a specified selector.

   • Useful for applying styles to elements that meet certain criteria while excluding others.

   • Example : https://codepen.io/fieldsmarshall/pen/qBLKpmx

6. :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.

7. :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.

8. :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.

9. :checked

   • Applies styles to radio buttons or checkboxes that are checked.

   • Enables customization of the appearance of selected options in forms.

10. :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

1. ::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

2. ::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.

   • Example: https://codepen.io/fieldsmarshall/pen/YzdvYbM

3. ::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.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezyGb

4. ::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.

   • Example: https://codepen.io/fieldsmarshall/pen/NWezyGb

5. ::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.

   • Example: https://codepen.io/fieldsmarshall/pen/dywKdGE

6. ::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.

Google Chrome, DevTools and Pseudo Classes

1. 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.

2. 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.

3. 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.

4. 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

  • pseudo-classes

  • pseudo-elements

• Helpful YouTube videos

  • https://www.youtube.com/watch?v=FMu2cKWD90g

  • https://www.youtube.com/watch?v=kpXKwDGtjGE

• Tailwind

  • https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes

  • https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-elements

• Code Pen Examples

  • https://codepen.io/collection/RzrQba