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

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Aching back from coding all day?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources

Ad