DEV Community

loading...
Cover image for CSS Selectors

CSS Selectors

Garima
Self taught Full Stack Web Developer
Updated on ・4 min read

To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this post.

If you have got some text that you want to render in Red or any other color How would you do that?
for ex you have this element

<div>
<p> This is first paragraph in this div which is to be rendered in Red Color</p>
<p> This is second paragraph in this div which is normal </p>
</div>
Enter fullscreen mode Exit fullscreen mode

You use a CSS selector to find that specific element and apply a CSS rule, like this.

div p:first-of-type {
  color: red;
  font-size: 1.5em;
}
Enter fullscreen mode Exit fullscreen mode

CSS provides us a lot of options to select elements and apply specific rules to them, ranging from very simple to very complex, to help us to tackle situations like this.

Parts of CSS rules

To understand how selectors work and their role in CSS, it's important to know the parts of a CSS rule. A CSS rule is a block of code, containing one or more selectors and one or more declarations of property which we want to make change in our HTML element.

image

In this image, the selector is .my-css-rule which finds all elements with a class of my-css-rule on the page. There are three declarations within the curly brackets. A declaration is a property and value pair which applies styles to the elements matched by the selectors. A CSS rule can have as many declarations and selectors as you like.

Simple Selectors

The most simple selectors of CSS are targeting the element by classes, ID and other attributes.

Universal Selectors

A universal selector is a selector which selects all the elements in HMTL file. Universal Selector is also known as wildcard. It matches all the elements.

*{
color: blue;
}
Enter fullscreen mode Exit fullscreen mode

This rule will apply on each and every element of the HTML file.

Type Selectors

Type selectors directly targets the HMTL element by its type/tag i.e. div, section etc.

p{
color: red;
}
Enter fullscreen mode Exit fullscreen mode

This rule cause every

tag to render in red color.

Class Selectors

An HTML element can have more than one class at a time. The class selector will target every element having that class.

<div class="test-class"> This is just a div </div>
Enter fullscreen mode Exit fullscreen mode

We can select this div with its class.

.test-class{
color: blue;
}
Enter fullscreen mode Exit fullscreen mode

In CSS , class is selected by a . this dot is not present in the HTML element. This means . is a character which instructs CSS to target all the elements having class test-class.

A HTML element that has a class of .test-class will still be matched to the above CSS rule, even if they have several other classes, like this:

<div class="test-class another-class some-other-classes"></div>
Enter fullscreen mode Exit fullscreen mode

Id Selectors

An HTML element with an id attribute should be the only element on a page with that ID value. An HTML element should not have more than 1 ID at a time (good practices) and if you have more than 1 ID in an element you code might break. You select elements with an ID selector like this:

<div id="test-id"></div>
Enter fullscreen mode Exit fullscreen mode

We can select this div with this ID

#test-id{
color: blue;
}
Enter fullscreen mode Exit fullscreen mode

As seen in the class selector we can select the id by the # symbol. # symbol instructs CSS to target the element having this ID.

Grouping Selectors

A selector doesn't have to match only a single element. You can group multiple selectors by separating them with commas:

h1, h2, h3, h4, h5, h6, .test-class, #test-id{
color: white;
Enter fullscreen mode Exit fullscreen mode

Complex selectors

You have already seen a lot of selectors, but sometimes, you will need more fine-grained control with your CSS. This is where complex selectors step in to help.

It's worth remembering at this point that although the following selectors give us more power, we can only cascade downwards, selecting child elements. We are not able to target upwards and select a parent element.

Combinators

A combinator is an element which resides inside another element. For ex <strong> tag can reside inside a <p> tag.

Descendant Combinators

Let's understand the relationship in Child and Parent tag.

<p>A paragraph of text with some <strong> bold text for emphasis /strong>.</p>
Enter fullscreen mode Exit fullscreen mode

The parent element is <p> tag child element is the <strong> tag. We can understand this because <strong> tag sits inside the <p> tag. So,

tag is the direct parent of <strong> tag.

A descendant combinator allows us to target the child element with the help of the parent tag. This use space to instruct about the parent-child relationship.

p strong{
color: red;
}
Enter fullscreen mode Exit fullscreen mode

This rule will select all the <strong> tag which resides inside a <p> tag.

Compound Selectors

You can combine selectors to increase specificity and readability. For example, to target <a> elements, that also have a class of .my-class, write the following:

a.my-class {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Resources

Discussion (2)

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

Nice, css selectors are pretty cool, I love using them, but few of them won't work in every browser,

Collapse
garimasharma profile image
Garima Author

Yeah , CSS3 effects and transforms are supported in current versions of approx. all browsers, but Safari, Firefox, and Opera require different code prefixes to make CSS3 effects and transforms work in their browsers.