Selectors

A CSS selector selects the HTML element or elements that you want to style.

There are different types of selectors:

• Basic
• Grouping
• Combinators
• Pseudo

Basics selectors

The basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

• Type elementname
• Class .classname
• ID #idname
• Attribute [attr=value]
• Universal *

Type selector

Used to target all HTML elements of a particular type

(Denoted by the HTML element name)

p {
  color: red;
}

button {
  background: #33DDEE;
}

Class selector

Used to target all classes with a particular class name

(Denoted by a dot .)

This is the most common selector used when styling a complex UI

.green {
  color: green;
}

.large-text {
  font-size: 30px;
}

ID selector

Used to target specific IDs

(Denoted by a hash #)

#main {
  padding: 10px;
}

Attribute selector

Used to target attributes with or without values

(Denoted by square brackets [ ] and an equals = before the value)

[hidden] {
  display: none;
}

[type="email"] {
  border: 2px solid blue;
}

Note: There are multiple ways to target attribute values, e.g. value contains or starts with a particular string

Universal selector

Matches all HTML elements of any type

This selector isn't too common, often used to reset the browsers styling

* {
  color: navy;
}

Grouping selectors

We can group selectors together if they share the same style declarations

For example, if we had the following styles

h1  {
  color: purple;
  font-weight: bold;
}

h2  {
  color: purple;
  font-weight: bold;
}

strong  {
  color: purple;
  font-weight: bold;
}

We could group them together using a comma , to reduce the amount of CSS needed

h1,
h2,
strong  {
  color: purple;
  font-weight: bold;
}

Combinators

Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four types of combinators

• Descendant A B
• Child A > B
• General sibling A ~ B
• Adjacent sibling A + B

Pseudo selectors

There are two types of pseudo selectors: pseudo-classes and pseudo-elements

There are a large number of these, and they often serve quite specific purposes

• Pseudo classes
• Pseudo elements

Pseudo classes

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer

They always start with a colon :pseudo-class-name

Example (:hover)

.hover-demo:hover {
  background-color: lightcoral;
  border-color: darkred;
}

Full reference at: MDN: Pseudo-classes reference

Pseudo elements

A pseudo element acts as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements

They always start with a double colon ::pseudo-element-name

Example (::first-letter)

.first-letter-demo::first-letter {
  font-size: 3em;
  font-family: serif;
  font-style: italic;
}

Generating content with pseudo elements

There are a couple of special pseudo-elements, which are used along with the content property to insert content into your document using CSS.

Example (::after)

<div class="after-content-demo">This text is in the HTML mark up..</div>

.after-content-demo::after {
  content: '..and this text is generated by CSS 😱';
  display: block;
}

Full reference at: MDN: Pseudo-elements reference