CSS Selectors and Specificity

Basic selectors

The building blocks of CSS targeting.

/* Element selector */
p { color: blue; }

/* Class selector (most common) */
.btn { background: #2563eb; }

/* ID selector (unique per page) */
#header { position: sticky; }

/* Universal selector */
* { box-sizing: border-box; }

/* Attribute selector */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"]   { color: green; }  /* starts with */
a[href$=".pdf"]    { color: red; }    /* ends with */
a[href*="example"] { color: blue; }   /* contains */

Combinators

Combinators express relationships between selectors.

/* Descendant: any level deep */
nav a { color: white; }

/* Child: direct children only */
ul > li { list-style: disc; }

/* Adjacent sibling: immediately after */
h2 + p { margin-top: 0; }

/* General sibling: any sibling after */
h2 ~ p { color: grey; }

Pseudo-classes

Pseudo-classes target elements based on their state or position.

a:hover      { text-decoration: underline; }
a:visited    { color: purple; }
input:focus  { outline: 2px solid blue; }
button:disabled { opacity: 0.5; }

/* Structural pseudo-classes */
li:first-child   { font-weight: bold; }
li:last-child    { border-bottom: none; }
li:nth-child(2)  { background: #f0f0f0; }
li:nth-child(odd)  { background: #fff; }
li:nth-child(even) { background: #f9f9f9; }
p:not(.intro)    { font-size: 0.9rem; }

Pseudo-elements

Pseudo-elements style specific parts of an element.

p::first-line   { font-weight: bold; }
p::first-letter { font-size: 2em; float: left; }

/* ::before and ::after add content */
.required::after {
    content: " *";
    color: red;
}

.quote::before {
    content: '"';
}

.quote::after {
    content: '"';
}

Selecting by "contains" — attribute, :has(), and text

CSS offers three distinct "contains" patterns. Note: :contains() is not a standard CSS selector — it was removed from the spec. It is available in jQuery and some browser devtools implementations, but must not be used in production CSS.

/* 1. Attribute value contains substring (*=) */
a[href*="example"]   { color: blue; }
[class*="btn-"]      { border-radius: 4px; }
[data-label*="warn"] { color: orange; }

/* 2. :has() — parent that structurally contains a child (CSS4, well-supported) */
article:has(img)     { border: 1px solid #e2e8f0; }
form:has(:invalid)   { border-color: red; }
li:has(> a)          { font-weight: 600; }

/* 3. :is() — match any of a list of selectors (reduces repetition) */
:is(h1, h2, h3) { line-height: 1.2; }
:is(.card, .panel):has(img) { padding: 0; }

/* Text content — CSS cannot select by text content. Use JavaScript: */
/* const els = Array.from(document.querySelectorAll('p'))
     .filter(p => p.textContent.includes('error')); */

Specificity calculation

When multiple rules target the same element, specificity determines which wins.

/* Specificity: (inline, IDs, classes/attrs/pseudos, elements) */

/* 0,0,0,1 */  p { color: black; }
/* 0,0,1,0 */  .text { color: blue; }
/* 0,1,0,0 */  #title { color: red; }
/* 1,0,0,0 */  style="color: green"  (inline)

/* Higher specificity wins, regardless of order */
#title { color: red; }    /* 0,1,0,0 */
.title { color: blue; }   /* 0,0,1,0 */
/* result: red */

/* Equal specificity: last declared wins */
.btn { color: blue; }
.btn { color: red; }   /* last wins: red */

/* !important overrides everything (avoid) */
.btn { color: blue !important; }

Exam tip

Specificity calculation is the #1 CSS interview question. Know the hierarchy: inline > ID > class/attribute/pseudo-class > element. And remember: specificity is compared column by column, not as a number.

Struggling with HTML & CSS?

Work 1:1 with a vetted HTML & CSS tutor on Wyzant. (affiliate link)