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?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ 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