CSS selectors are the most versatile way to target an element because they allow for a combination of the methods listed above – IDs, classes, names and so on.
The CSS Selector is the “path” of an element in your website’s code. It’s what the website’s stylesheet (CSS) would use to identify an element. If you are familiar with CSS, this will be a breeze. If not, then there are some simple tricks to learn.
You structure these selectors by adding multiple identifiers together – classes, IDs and so on. CSS selectors work by ascending order of specificity – so you start off general and get more specific.
If you were writing an address, it would work like this:
England, London, Example Street, 12
Or in HTML:
html .wrapper header menu li.menu-item a.homepage
So we begin by matching the HTML tag, then an element with the class of “wrapper”, then a <header>
tag, then a <menu>
tag, then a list item inside with a class of “menu-item” and finally an <a>
tag with a class of “homepage”.
The actual element we interact with is the last one – “a.homepage”. The rest of the classes and elements making up the selector are useful because they restrict where the class can be found.
For example, if you had a site footer containing another “a.homepage” this would not be matched unless its path was also the same. To eliminate the chance of duplicates, you can add in as many extra classes as you like.
You also have the option of using more advanced CSS to match elements – for example:
Match the first, last or a specific item in a set of items. Examples:
a:first-child
– matches the first <a>
tag in a seth1:last-child
– matches the lastdiv:nth-child(3)
matches the 3rd <div>
in a set of <div>
sThis symbol >
indicates that you only want to match an element that is immediately inside the first. This can be useful if you are concerned about accidentally matching other elements nested further down.
Use a + symbol between parts of your selector to indicate if the element should be an immediate sibling (ie directly next to) the other element in the markup. For example:
<div class="box"> <p>Login Here</p> <a href="/login">Login</a> <a href="/register">Register</a> </div>
Selector: .box p + a
In this example, the selector would match the “login” link but not the “register” link because it’s not an immediate sibling of the <p>
.
Sometimes it can be easier to define what you don’t want! In this example:
<ul class="product-list"> <li class="product sold-out"> <p>Sold out!</p> <a href="/buy">Buy</a> </li> <li class="product sold-out"> <p>Sold out!</p> <a href="/buy">Buy</a> </li> <li class="product"> <p>Buy me!</p> <a href="/buy">Buy</a> </li> <ul>
You can use :not to target the product that doesn’t have the class of “sold-out”; e.g.
.product-list li:not(.sold-out) a
CSS Selector writing can be tricky to understand at first but often offers the best means of targeting the right element. We recommend testing selectors carefully – you can even do this in-browser using the “Inspect” view – to ensure you have the right element.