Guide to Advanced CSS Selectors for Front-end Development

Experienced developers know that CSS is one of the most dynamic tools available for creating websites and similar applications. By using CSS, developers can alter the look of a website within a couple of minutes without having to modify the markup.

Although CSS is highly popular among skilled developers, CSS selectors are almost always improperly used or aren’t used to its full potential. Instead, many developers clog their HTML with extraneous spans, divs, IDs, and classes.

To avoid this from happening, using CSS selectors is crucial to keep your markup semantic and simple. In this guide, we’ll break down all the technical aspects of using advanced CSS selectors to target specific elements without the classification of IDs and classes.

By the end of this guide, you’ll learn how to properly use CSS selectors and keep your stylesheets and code flexible. Whether you’re new to CSS or a veteran developer, this information can save you a lot of time and result in the creation of more powerful internet platforms.

All About CSS Specificity

The topic of CSS selectors, on its own, is a complicated subject. As you can imagine, advanced CSS are even more difficult to understand without the right context. Therefore, before diving into this topic, it’s important to first discuss how CSS specificity works.

This will help developers properly use selectors and avoid wasting a lot of time debugging a critical CSS issue that could have been easily prevented with prior knowledge.

Developers writing CSS code should be mindful that specific selectors will outrank others in the same cascade. To put it simply, the latest selector you write will not always outrank the previous one for the same elements.

With that said, how can developers determine the “specificity” of a particular selector? The solution is more basic than what you may realize. First, remember that the specificity of a selector will always be displayed as a series of four numbers separated by commas.

This may look like: 1,3,2,1 or 0,1,3,2.

Now that you know how to calculate the specificity of CSS selectors, here are six important considerations to remember:

1. Unless there is some sort of style attribute associated with the element in the markup, the first digit in the series is “0”.
2. The second digit is simply the sum of all the IDs for that selector.
3. The third digit is the sum of pseudo-classes and attributes for that selector.
4. The fourth digit counts the pseudo-elements and real elements in the selector.
5. (*) is the universal selector, and it has a specificity equal to “0.”
6. The selector that appears last in a stylesheet will be applied if it shares the same simplicity with another selector.

Initially, these concepts can be a bit difficult to understand. Below are some great examples to help build clarification:

• #sidebar p:first-line — The selector series will be 0,1,0,2
• h2 + p — The selector series will be 0,0,0,2
• #sidebar h2 — The selector series will be 0,1,0,1
• title — The selector series will be 0,0,1,1

From the selectors above, the first one will be applied to the element because it has the higher specificity:

• #sidebar p#first { color: red; } — The selector series will be 0,2,0,1
• #sidebar p:first-line { color: blue; } — The selector series will be 0,1,0,2

As you can see, it’s important to at least have a basic understanding of specificity works in CSS. Fortunately, developers can rely on a tool called Firebug to easily understand which selectors are being applied to specific elements.

Firebug accomplishes this by displaying all the selectors, ranked by their specificity when developers inspect any element.

The next step in using CSS selectors involves understanding attribute selectors. The next section will cover everything there is to know about attribute selectors.

Attribute Selectors: Everything You Need to Know

Understanding how an attribute selector works is pretty straightforward. An attribute selector allows developers to target any elements based on the attributes it has.

Particularly, you can:

• Only specify the attributes for an element and reflect the attributes across other elements in the HTML, regardless of its value.
• Target elements having specific attributable values.

In either case, attribute selectors are very beneficial.

With that said, there are six primary kinds of attribute selectors:

1. The attribute is required to specify an exact value. This is shown as [att=value].
2. The attribute will need to be shown as a whitespace. One of the words will explicitly list the attribute’s value. This is shown as [att~=value]
3. The attribute’s value will simply be “value” or begin with the word. It will then precede “-”. This is shown as [att|=value].
4. The attribute’s value begins with a particular value. This is shown as [att^=value].
5. The attribute’s value ends with a particular value. This is shown as [att$=value].
6. The attribute’s value contains the value. This is shown as [att*=value].

For clarification purposes, let’s provide an example. Let’s say that you want to change the background color of every div element on your website’s blog. To save a lot of time, you can simply use the attribute selectors discussed above to target every attribute that are posts on your blog.

Using this selector works something like “CTRL + F” to find specific words and text on a web page.

Following this trick will allow you to match all div elements that contain the word “post” to make quick changes in real time. You can also use this method to target various types of input elements.

A great example is if you want to make highlighted text a different width than other text. To accomplish this goal, you can use a basic attribute selector.

This method will allow you to quickly find, select, and modify all input elements that are related to text.

Finally, what if you want to add a different icon to various file types you’re linking to? You can use an attribute selector in this scenario to let your website visitors know then they’ll see a document, PDF, or image.

Here’s what this attribute selector will look like:

In this snapshot, all of the links represented as (a), will be targeted by an attribute selector, where the ($) in href is followed by the formats: .doc, .pdf, or .jpg.

Important Notice:

All major browsers support attribute selectors, except for Internet Explorer 6. This means if you’re planning on using attribute selectors in your stylesheet, you should ensure that IE6 users can still access a user-friendly website.

This is highly recommended for a responsiveness standpoint, as everyone deserves to access a usable version of your website.

Child Selector 101

In CSS, a child selector looks like a “>” sign. This selector allows developers to target elements that are children of other elements. As you can imagine, the example that will be used here will involve headers, which have different subcategories.

If you’re editing a web page and want to align all the h2 elements that are children of a div sidebar, but not target the further descendants (grandchildren) of the same element, you can use the following child selector:

You can also target both children and grandchildren selectors at the same time. For example, let’s say that you only want to target  blockquote elements inside the divs of the body.

You can also use a class selector to achieve the same effect:

Important Notice:

Child selectors, like attribute selectors, are not supported on Internet Explorer 6. If the overall effect you are trying to achieve will improve the usability of your website, then you should consider using a class selector instead.

However, this would defeat the purpose of using the child selector in the first place.

Want to Streamline All This Work?

Using advanced CSS selectors can work in a wide variety of scenarios. Chances are, you may be too busy or lack the expertise and resources to do all this work on your own.

That’s where we come in.

Contact us today to speak to a member of our team about our website development services.

Ryan Nead

Ryan is the VP of Operations for DEV.co. He brings over a decade of experience in managing custom website and software development projects for clients small and large, managing internal and external teams on meeting and exceeding client expectations–delivering projects on-time and within budget requirements. Ryan is based in El Paso, Texas.