Selectors

CSS Selectors

Now we have only applied styles to main HTML elements on our website like <h1> and <p>, but with this kind of syntax we could only apply the styles to same named elements on our site. To get further with our styling, we will next learn about different kinds of CSS selectors.

There are 5 different kind of CSS selectors available: 1. Universal selector 2. Type selector 3. Class selector 4. ID selector 5. Attribute selector

Universal Selector

The universal selector (*) matches elements of any type. Usually you define this only once on your CSS, if at all. Read more.

Example (applies red color for all elements):

CSS

/* 1/5: Universal Selector */
/* Applies styles to each element on the page */
* {
  color: red;
}

Type Selector

The type selector matches all elements that have the given element name. This is commonly used in CSS. Read more.

Example (Makes all <p> elements bold):

CSS

/* 2/5: Type Selector */
/* Matches all elements that has the given element name. Very commonly used. */
p {
  font-weight: bold;
}

Class Selector

The class selector matches all elements that have the given class. All class selectors start with dot (.). Class selectors are probably the most used selector in CSS. Read more.

Example 1 (Makes all elements with class .text-light gray colored):

CSS

/* 3/5: Class Selector */
/* Matches all elements that have the given class name (.). Very commonly used. */
.text-light {
  color: gray;
}

Example 2 (Makes all elements with class .text-highlight have orange background):

CSS

.text-highlight {
  background-color: orange;
}

Example 3 (Makes all elements with class .text-highlight inside <footer> have light gray background):

CSS

footer .text-highlight {
  background-color: lightGray;
}

ID Selector

The ID selector matches all elements that have the given id set. All id selectors start with hashtag (#). ID selectors are also one of the most used selectors in CSS, right after class selector. Read more.

Example (Makes the element #todo-list-frontpage's font size large):

CSS

/* 4/5: ID Selector */
/* Matches all elements that have the given ID. Commonly used. */
#todo-list-frontpage {
  font-size: 35px;
}

Attribute Selector

The attribute selector matches all elements that have the given attribute set. The attribute selector is set inside brackets []. This selector is not that commonly used. Read more.

Example 1 (Make links with href attribute set bold):

CSS

/* 5/5: Attribute Selector */
/* Matches all elements that have the given attribute. Rarely used. */
a[href] {
  font-weight: bold;
}

Example 2 (Make links with href attribute set to https://google.com red):

CSS

a[href="https://google.com"] {
  color: red;
}

Grouping the Selectors

Using a single CSS rule, you can also target multiple selectors. You can do this by grouping the selectors using comma ,.

Example (makes all <h1>, <h2> and <h3> elements have orange color):

CSS

/* Grouping the Selectors */
h1, h2, h3 {
  color: orange;
}