dev-Blink-White (1)dev-Blink-Whitedev-Blink-Whitedev-Blink-White
  • BRANDS
    • Website.Design
    • SEO.co
    • PPC.co
  • SERVICES
    • Services #02
      • Software/IT Staffing
      • Devops
      • Project Management
      • Technology Architecture
    • Services #01
      • Web Development
      • Mobile Development
      • App Development
      • UX/UI Design
    • Services #03
      • MVP Development
      • SaaS Development
      • API Development
      • QA & Testing
  • SKILLS
    • Skills #01
      • Java
      • Javascript
      • Node.js
      • React
      • Electron
      • Laravel
      • HTML5
      • PHP
    • Skills #02
      • Python
      • C#/.NET
      • LabVIEW
      • Unity
      • Webflow
      • Shopify
      • iOS
      • Android
    • Skills #03
      • SolidWorks
      • Azure
      • Sitefinity
      • OpenCV
      • AWS
      • WordPress
      • Salesforce
      • Oracle
    • Skills #04
      • Nextcloud
      • NetSuite
      • SQL
      • SQL Server
      • Tableau
      • SAP
  • ABOUT
    • PORTFOLIO
    • BLOG
    • ACQUISITIONS
    • MARKETPLACE
  • CONTACT
✕

Guide to Advanced CSS Selectors for Front-end Development

Last Updated by Ryan Nead on May 4, 2021
Guide to Advanced CSS Selectors

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.

Table of Contents

  • All About CSS Specificity
  • Attribute Selectors: Everything You Need to Know
  • Child Selector 101
  • Want to Streamline All This Work?

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.

firebug

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.

selector to find specific words

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.

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:

attribute selector

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:

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:

Blockquote

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.

Share
0

Related posts

July 2, 2022

Podcast Episode Schema Test


Read more
How to Put Candidates at Ease During Job Interviews
June 27, 2022

How to Put Candidates at Ease During Software Developer Job Interviews


Read more
What is CI/CD? What Does it Matter for Dev Teams?
June 20, 2022

What is CI/CD? Why CI/CD Matters for Dev Teams


Read more

Services

  • Website Development
  • Mobile Development
  • Application Development
  • UX/UI Design
  • Technology Architecture
  • Software/IT Staffing
  • DevOps Services
  • Quality Assurance Testing
  • MVP Development
  • SaaS Development
  • API Development
  • Project Management

Skills

  • Java
  • Javascript
  • Node.js
  • React
  • Electron
  • Laravel
  • HTML5
  • PHP
  • Python
  • C#/.NET
  • Labview
  • Unity
  • Webflow
  • Shopify
  • iOS
  • Android
  • Solidworks
  • Azure
  • Sitefinity
  • OpenCV
  • AWS
  • Wordpress
  • Salesforce
  • Oracle
  • Nextcloud
  • Netsuite
  • SQL
  • SQL Server
  • Tableau
  • SAP

Technologies

  • Blockchain (DLT)
  • Extended Reality (AR/VR)
  • Cognitive Computing (ML/AI)
  • Cybersecurity
  • ERP
  • CRM
  • Online Storage
  • Big Data
  • Business Intelligence
  • Internet of Things (IOT)
  • Robotic Process Automation

Industries

  • Enterprise
  • Government
  • Education
  • Small Business
  • Marketing
  • Finance
  • Healthcare
  • Agriculture
  • eCommerce

About

  • About Us
  • Our Work
  • DEV Blog
  • Careers
  • Contact Us
  • Email: dev@dev.co
    Call: +1 (206) 438-9789
software development company
Design. Develop. Deploy.
© 2022 Nead, LLC. All Rights Reserved
Privacy Policy | Terms of Service | Sitemap
SEO.co // PPC.co // Website.Design
An Invest.net Partner
 
Required 'Candidate' login to applying this job. And try again
 

Login to your account

  • Forgot Password? | Sign Up

Reset Password

  • Already have an account? Login

Enter the username or e-mail you used in your profile. A password reset link will be sent to you by email.

Signup to your Account

Choose your Account Type
  • Candidate I want to discover awesome companies.
  • Employer I want to attract the best talent.
  • By clicking checkbox, you agree to our Terms and Conditions and Privacy Policy

    Already have an account? Login

Close
 

Answers

 

Account Activation

Before you can login, you must activate your account with the code sent to your email address. If you did not receive this email, please check your junk/spam folder. Click here to resend the activation email. If you entered an incorrect email address, you will need to re-register with the correct email address.