CSS Selectors

CSS selectors are used to select an HTML element you want to apply styling to. You can target HTML elements in various ways with selectors.

A CSS Selector is the first part of a CSS Rule-Set. In the example below, h1 is the CSS Selector.

h1 {
 color: red;
 font-size: 30px;
}

Types of CSS Selectors

1. Simple Selectors – selecting an element based on name, id or class
2. Combinators – selecting an element based on a relationship between them
3. Pseudo-class Selectors – select elements based on a certain state
4. Pseudo-elements Selectors – select and style a part of an element
5. Attribute Selectors – select elements based on the attribute or attribute value

Simple CSS Selectors

As mentioned above, these are the HTML Tag name, id or class. The first one we will look at is the actual HTML Tag/Element Selector.

CSS Element Selector

This is a basic way to target an HTML element with CSS. You can just target the Tag name itself. Checkout the example below.

p {
 font-size: 24px;
 color: #000;
}

As you can see above, we are targeting the paragraph tag <p>.

CSS id Selector

The id selector targets the id attribute of an HTML tag. Remember, the id of an element is supposed to be unique in each HTML Document which means it should be used only once per page.

<div id="uniqueID">
</div>

In the above example, I simply have a div with the id attribute that has a value of uniqueID. This is so the code snippet below makes sense.

#uniqueID {
  color: blue;
}

In the above code example, we are targeting the id #uniqueID and applying the color blue.

CSS Class Selector

The class selector targets an HTML element with a particular class which is represented by a . period. Checkout the example below.

<div class="lead">
</div>

In the code example above, I created a simple div with a class attribute that has a value of lead. In the code example below I show you the CSS for that div.

 .lead {
    font-size: 30px;
}

In the code example above, we use the .lead<code> class selector to make the font-size larger for any text inside that div. You can also target a specific HTML element that has a class like so. <pre><code class="language-css line-numbers"> p.lead { color: red; }

In the code example above, if you have a paragraph with the class of lead, it will be given the color style red while at the same time having the larger font-size of 30px from the earlier code example.

CSS Universal Selector

This selector will target every element on a page. You will typically find this in a CSS reset. It uses an asterisk to target each element. Checkout the example below.

 * {
  margin: 0;
  padding: 0;
}

The code example above will target every element and set the margin and padding to 0.

Grouping CSS Selectors

As mentioned in the previous tutorial on CSS Syntax, you can group CSS Selectors to keep your code compact.

Example of Selectors with the same style applied but not grouped together.

h1 {
  color: red;
}

h2 {
  color: red;
}

h3 {
  color: red;
}

h4 {
  color: red;
}

h5 {
  color: red;
}

h6 {
  color: red;
}

Example of Grouping the selectors together to make our code more concise.

h1, h2, h3, h4, h5, h6 { color: red; }

The code snippet above is better to work with.

CSS Attribute Selectors

You can style an HTML element that have a specific attribute or values.

Example of targeting a link that has the target attribute and applying a different background color to it.

a[target] {
  background: #eee;
}

Example of targeting a link that has an attribute value and applying a different background color to it.

a[target="_blank"] {
  background: #ccc;
}

CSS Pseudo-classes and Pseudo-elements

You can target an elements state of a part of an HTML element.

Example targeting a link when it’s hovered over. The link will turn red only when it’s hovered over.

a:hover { color: red; }

Example targeting part of an HTML element. In this example, we will take the first line of a paragraph and change it’s font-size.

p::first-line { font-size: 24px; }

CSS Combinators

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

CSS Descendant Selectors

You can target elements that is a descendant of another element. Checkout the example below.

ul li a {
  text-decoration: none;
}

In the example above, you’re only targeting links that are contained in an unordered list.

CSS Child Selectors

You can also target an element that is a direct child of another element using the greater than symbol.

div > p {
  background: #eee;
}

CSS Adjacent Sibling Selector

The adjacent sibling selector can seem a little complicated but with practice, you’ll get used to it. With this selector, you’re targeting a sibling of another element. Let’s look at an example.

h1 + p {
  color: red;
  font-size: 24px;
}

In the example above, we are only targeting the paragraph tag if it’s the adjacent sibling of the h1 element. Note: they have to share the same parent element and the h1 element has to come right before the paragraph tag.

CSS General Sibling Selector

This selector is similar to the adjacent sibling selector but isn’t as strict. Checkout the example below.

h1 ~ p {
  color: red;
  font-size: 24px;
}

In the example above, all paragraphs that are a sibling of an h1 element will be targeted.

Share This On: