02. Pseudo Elements and Classes

Pseudo elements are used to target elements using characteristics other than their name, attributes or content. These properties lie outside the document tree, which is tree that defines the structure of HTML on a webpage.

Selecting the first letter

To specify pseudo-elements, we use a colon after the selector. dynamically based on user interaction or user's state.

To select the first text letter inside a box, we use first-letter. And for the first line, we use first-line.

p.intro::first-letter {
  color: red;
} 

Hello my name is Bob!

Selecting the first child

We can also select elements that are the first-child of a container.

ol li:first-child {
  color: purple;
  font-style: italic;
  font-weight: bold;
} 

This code will select the first-child list items from an ordered list.

  1. item1
  2. item2
  3. item3

And more!

There are far more pseudo-elements that allow you to target specific elements within a parent container.

:first-child
Selects the first child of a parent element.
:last-child
Selects the last child of a parent element
:first-of-type
Selects the first element of a certain type.
:last-of-type
Selects the last element of a certain type.
:not(selector)
Selects every element that is not a specific selector element
:nth-child(n)
Selects the nth child of an element
:nth-last-child(n)
Selects the nth child, counting backwards, of an element
:nth-last-of-type(n)
Selects the nth last element
:nth-of-type(n)
Selects the nth element of a selector type
:only-of-type
selects every element that is the only element of its parent
:only-child
Selects every element that is the only child of its parent

Aching back from coding all day?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

Build modern and responsive webpages

High Performance Web Sites

Build modern and responsive webpages Try Front-end

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.

$ Check price
29.9929.99Amazon 4.5 logo(63+ reviews)

More Front-end resources

Ad