CSS Selectors: Targeting HTML Elements

29 June, 2023

Contributors

Shruti Balasa

@shrutibalasa

Now that you have a basic idea of CSS, let’s explore CSS selectors. Selectors is how we specify which HTML elements to apply the styles we want. Once again, consider this sample HTML within the <body> element.

<h1>Let's learn CSS</h1>
<p class="first">
	CSS is what gives the look and structure to our HTML web pages.
</p>
<p id="second-para">
	With CSS, we can transform the plain HTML elements into beautiful and visually appealing designs. Let's see how.
</p>
<h2>CSS Properties</h2>
<p class="first">
	CSS is all about properties, values, and rules.
</p>
<h2>CSS Selectors</h2>
<p>
	Selectors is how we specify which HTML elements to apply the styles we want.
</p>

We’ve already seen one of the simplest types of selector. We used the p selector to select all the paragraph elements in the web page. These are called Element Selectors.

Element Selectors

The element selector allows us to target all elements of the same type. It's as simple as using the element name as the selector. To target all paragraphs, we used the p selector, and to target all h2 elements, we can use the h2 selector.

h1 {
	color: green;
}
p {
  color: blue;
}

This is what we get.

Class Selectors

Another commonly used selector is the class selector. We assign a class to one or more elements in our HTML, and then use that class as the selector in CSS. Notice that we’ve added the class “first” to two paragraphs in our HTML. Using that class, we can style both of those paragraphs:

.first {
	font-size: 20px;
}

A class name needs to be prefixed with a dot . to select it. If you append these 3 lines to your existing CSS, you can notice in the browser that the paragraphs with “first” class have a bigger font size. The paragraphs without that class are not affected by this rule.

ID Selectors

IDs are like unique identifiers for elements. They should only be used once per page, unlike classes. We need to prefix the ID name with a hash # in CSS to select them by ID. For example:

#second-para {
	font-weight: bold;
}

With this, only the paragraph with that ID turns bold.

The class and ID selectors are the most commonly used ones.

Attribute Selectors

Attribute selectors allow us to target elements based on their attributes. For example, we can target elements with a specific value for a certain attribute. Here's how it works:

input[type="text"] {
  /* CSS properties and values go here */
}

In this case, we target all input elements with the attribute type="text" and apply styles accordingly.

Also notice the syntax for comments in CSS. They start with /* and end with */ and can span across multiple lines.

Combining Selectors

CSS selectors become even more powerful when we combine them to target specific elements. We can combine element selectors with class selectors, ID selectors, or even other selectors to further narrow our selection.

Consider this piece of HTML:

<h1 class="first">First Heading</h1>
<p class="first">This is the first paragraph</p>

Here, both our elements have the class “first”. To target only the heading elements with class first, we can combine the element selector with the class selector like so:

h1.first {
	color: green;
}

This way, we can style specific elements with much ease.

Selecting Child Elements

For targeting child elements in CSS, you can use a space or the > selector. For example, consider this HTML snippet:

<div class="container">
  <p>This is a child paragraph.</p>
  <p>Another child paragraph.</p>
</div>
<p>This is a paragraph outside div.</p>

To target only those paragraphs within div, we can do this:

.container p {
	/* CSS properties and values go here */
}

.container > p {
	/* CSS properties and values go here */
}

The only difference between space and > is that with space, you can target all child elements even if they are nested deep inside the element. However the > combinator selects only direct child elements.

There are many such combinations and there’s lot more to learn when it comes to selectors. We’ll pick up more while learning some fundamental CSS properties next.