Selectors

Selecting

• By Element

h1 {
}

• By Class, with . .

.secondary {
}

• By ID, with # .

#main-text {
}

Attribute selector ( [] )

• Removes the 'Change sorting' functionality and icon by selecting the attribute.

[aria-label="Change Ordering"] {
  display:none;
}

• Using aria-label=  gives a string match. Using aria-label*=  gives a substring match.

Chaining

• Using , .

h1, h2 {
}

Inside of

• Using  (space).

h1 h2 {
}

• " h2  tags that have a h1  as their parent".

One Level Deep (Children)

• Using > .

.hero > h2 {
}

• The >  (child combinator) is used to select only the immediate children of the body  element that also have the classes specified.

• In the example above, select children of the class .hero  that have an h2  element.

Everything Selector ( * )

• Selects everything in the entire web page.

* {
  font-family: Arial;
}