How to write CSS Selectors like a BOSS
Tags: css, testing, tutorial, webdev
Published: 2020-07-08 13:32:58


I work as a Solutions Architect at [Endtest](https://endtest.io).

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](https://dev-to-uploads.s3.amazonaws.com/i/v11xgjgjft6zyy4uup6w.gif)

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*:

```html
<div id="boss">I'm the boss.</div>
```

Your CSS Selector will look like this:
```css
#boss
```
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*?

```html
<div class="boss">I'm the boss.</div>
```

Your CSS Selector will look like this:
```css
.boss
```

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.

```html
<div class="boss champion expert">I'm the boss.</div>
```

Your CSS Selector can look like this:
```css
.boss
```

Or like this:
```css
.champion
```

Or like this:
```css
.expert
```

##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.
```html
<div name="boss">I'm the boss.</div>
```

Your CSS Selector will look like this:
```css
div[name="boss"]
```

##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.

```css
tag_name[attribute="attribute_value"]
```

You can even skip the tag name:
```css
[attribute="attribute_value"]
```

Or just use an asterisk instead of the tag name:
```css
*[attribute="attribute_value"]
```

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

```html
<input type="file" id ="upload3388">
```

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

```css
input[type="file"]
```

##5. Write a CSS Selector by using multiple attributes.

```html
<input type="text" placeholder="Full Name">
<input type="text" placeholder="Email">
<input type="text" placeholder="Telephone">
```
We just have to line up the attributes:
```css
tag_name[attribute1="attribute1_value"][attribute2="attribute_2_value"]
```

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

```css
input[type="text"][placeholder="Full Name"]
```

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

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

```html
<div id="boss5693">I'm the boss.</div>
<div id="champ4435">I'm the champ.</div>
<div id="expert9811">I'm the expert.</div>
```

Our CSS Selector can use the following pattern:
```css
tag_name[attribute*="part_of_attribute_value"]
```

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

```css
div[id*="boss"]
```

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

Let's take a look at this example:

```html
<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>
```

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:

```css
body > div > input[type=text]:nth-child(1)
```

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

```css
input[placeholder="Email"]
```

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

```html
<html>
   <body>
      <ul class="items">
         <li class="item">Apple</li>
         <li class="item">Orange</li>
         <li class="item">Banana</li>
      </ul>
   </body>
</html>
```
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:

```xpath
//li[contains(text(),'Orange')]
```

## The Smart Alternative

If you want to perform Automated Tests, you should try [Endtest](https://endtest.io), 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](https://endtest.io/guides/docs/how-to-create-web-tests/).