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: '"';
}

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.