DEV Community

Cover image for How to write CSS Selectors like a BOSS
Liviu Lupei
Liviu Lupei

Posted on • Updated on

How to write CSS Selectors like a BOSS

#css #testing #tutorial #webdev

I work as a Solutions Architect at Endtest.

In this article, I will show you how to write CSS Selectors like a BOSS.

What's a CSS Selector?

CSS Selectors are patterns used to select the element(s) you want to interact with.

They can be used in your CSS files, in your JavaScript code or in your Automated Tests.

The Restaurant Analogy

Using a CSS Selector to target an element is like telling someone how to get to your favourite restaurant.

If your favourite restaurant has a unique name, it's really easy.

But if it doesn't, you have to provide more details.

You can provide directions on how to get there or you can provide other details about the restaurant.

Providing directions usually works, unless that restaurant is a food truck that moves around.

The Easy Way

You can get the CSS Selector for an element directly from the Chrome Developer Tools:

Get CSS Selector

But that CSS Selector might not be good enough for your specific needs.

That's why sometimes you need to write your own CSS Selector.

1. Write a CSS Selector by using the ID.

This is the most basic example of a CSS Selector.

Let's say you have a div element with the ID boss:

<div id="boss">I'm the boss.</div>
Enter fullscreen mode Exit fullscreen mode

Your CSS Selector will look like this:

#boss
Enter fullscreen mode Exit fullscreen mode

You can only use this option if the ID of that element is not dynamic.

2. Write a CSS Selector by using the Class Name.

What if your element had the Class Name boss?

<div class="boss">I'm the boss.</div>
Enter fullscreen mode Exit fullscreen mode

Your CSS Selector will look like this:

.boss
Enter fullscreen mode Exit fullscreen mode

It's worth knowing that Class Names are usually shared by multiple elements.

A common mistake is to see multiple Class Names and to think that it's just one Class Name with spaces.

Class Names cannot have spaces.

If you see a space in the value of the class attribute, it just means that you have more than one Class Name.

<div class="boss champion expert">I'm the boss.</div>
Enter fullscreen mode Exit fullscreen mode

Your CSS Selector can look like this:

.boss
Enter fullscreen mode Exit fullscreen mode

Or like this:

.champion
Enter fullscreen mode Exit fullscreen mode

Or like this:

.expert
Enter fullscreen mode Exit fullscreen mode

3. Write a CSS Selector by using the Name attribute.

Modern frameworks like React and Ember.js tend to make the IDs dynamic, which makes them unreliable if used in CSS Selectors.

In such cases, we can use the Name attribute.

<div name="boss">I'm the boss.</div>
Enter fullscreen mode Exit fullscreen mode

Your CSS Selector will look like this:

div[name="boss"]
Enter fullscreen mode Exit fullscreen mode

4. Write a CSS Selector by using any attribute.

You can use the pattern from the previous example to write a CSS Selector by using any attribute, not just the Name.

tag_name[attribute="attribute_value"]
Enter fullscreen mode Exit fullscreen mode

You can even skip the tag name:

[attribute="attribute_value"]
Enter fullscreen mode Exit fullscreen mode

Or just use an asterisk instead of the tag name:

*[attribute="attribute_value"]
Enter fullscreen mode Exit fullscreen mode

Let's say you we have this file input with a dynamic ID:

<input type="file" id ="upload3388">
Enter fullscreen mode Exit fullscreen mode

Since we can't use the ID, we can just write a CSS Selector that uses the type attribute:

input[type="file"]
Enter fullscreen mode Exit fullscreen mode

5. Write a CSS Selector by using multiple attributes. 

<input type="text" placeholder="Full Name">
<input type="text" placeholder="Email">
<input type="text" placeholder="Telephone">
Enter fullscreen mode Exit fullscreen mode

We just have to line up the attributes:

tag_name[attribute1="attribute1_value"][attribute2="attribute_2_value"]
Enter fullscreen mode Exit fullscreen mode

So, the CSS Selector for the first input will be:

input[type="text"][placeholder="Full Name"]
Enter fullscreen mode Exit fullscreen mode

6. Write a CSS Selector by using part of an attribute.

You might encounter a situation where all of your attributes are dynamic.

<div id="boss5693">I'm the boss.</div>
<div id="champ4435">I'm the champ.</div>
<div id="expert9811">I'm the expert.</div>
Enter fullscreen mode Exit fullscreen mode

Our CSS Selector can use the following pattern:

tag_name[attribute*="part_of_attribute_value"]
Enter fullscreen mode Exit fullscreen mode

So, the CSS Selector for the first div will look like this:

div[id*="boss"]
Enter fullscreen mode Exit fullscreen mode

7. Write a CSS Selector by using parents of the element.

Let's take a look at this example:

<html>
   <body>
      <div class="login-form">
         <input id="mat-input-6" type="text" placeholder="Email">
         <input id="mat-input-9" type="password" placeholder="Password">
      </div>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

We can easily spot that the IDs are dynamic, so we have to avoid them.

We can write a CSS Selector for the Email input by using its parents:

body > div > input[type=text]:nth-child(1)
Enter fullscreen mode Exit fullscreen mode

Obviously, it would be easier to write it by using an attribute:

input[placeholder="Email"]
Enter fullscreen mode Exit fullscreen mode

8. Write a CSS Selector by using the text inside the element. 

<html>
   <body>
      <ul class="items">
         <li class="item">Apple</li>
         <li class="item">Orange</li>
         <li class="item">Banana</li>
      </ul>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let's try to write a CSS Selector for the Orange list item.

Ugh, we can't.

CSS Selectors do not have the ability to locate an element based on the text, but XPaths do.

The XPath for the Orange list item would be:

//li[contains(text(),'Orange')]
Enter fullscreen mode Exit fullscreen mode

The Smart Alternative

If you want to perform Automated Tests, you should try Endtest, our award-winning cloud platform.

We even have a test recorder which can be configured to deal with dynamic IDs and attributes:

You can find all the details in our Documentation.

Top comments (2)

Collapse
 
trasherdk profile image
TrasherDK • • Edited

Example 6 screams at me.

attrib^=value Saying it uses part of the attribute value is just wrong.
It matches the start of the attribute value, and only that.

Showing the ^= without also demonstrating $= seems equally wrong.

EDIT: attrib*=value is the one that uses part of the attribute value

Collapse
 
pzelnip profile image
Adam Parkin •

Nice, I didn't even know you could copy a CSS selector from within Chrome dev tools. That is a handy tip.

Read next

lithephp profile image

Improving the Performance of Your PHP Application with Lithe Cache

Lithe -

furkangozukara profile image

Thoroughly experimented with Fine-Tuning / DreamBooth training of Flux-dev-de-distill, PixelWave v03, Verus Vision

Furkan Gözükara -

chiefremote profile image

Part 4 - Using Cursor and Claude to Create Automated Tests with Playwright

Joe Giglio, Chief Remote Officer -

scofieldidehen profile image

Thursday Quiz

Scofield Idehen -