Combinators, pseudo-classes and pseudo-elements

What you will learn

• combinators: descendant (space), child (>) and adjacent sibling (+)
• attribute selectors such as input[type="text"]
• pseudo-classes: :hover, :focus, :active, :first-child
• pseudo-elements: ::before, ::after, ::first-letter

Understand the idea

Combinators join selectors. A space is the descendant combinator: .menu a is every link anywhere inside .menu. > is the child combinator: .menu > li is only the direct children. + picks the element right after another: h2 + p is the paragraph just after an h2.

An attribute selector matches an element by an attribute: input[type="text"] is only text boxes and a[href^="https"] is links whose address starts with https.

A pseudo-class is a state, written with one colon. :hover is when the pointer is over the element, :focus is when it has the keyboard, :active is while it is being pressed, and :first-child is an element that comes first inside its parent. A pseudo-element is a part of an element, written with two colons. ::before and ::after insert generated content before and after an element (they need a content property), and ::first-letter is its first letter. These tricks add decoration without adding any HTML.

Example

.menu a:hover {
  color: crimson;
}

.menu li:first-child {
  font-weight: bold;
}

h2::before {
  content: "★ ";
  color: gold;
}

input[type="text"] {
  border: 2px solid teal;
}

Your turn: code to type and practise

Write four rules with exactly these selectors: .menu a:hover (set a color), .menu li:first-child (set font-weight), h2::before (set content) and input[type="text"] (set a border).

← Fonts and text stylingThe box model →