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

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

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Ad