Selectors

Learning objectives#

• Use element, class and id selectors
• Target elements by relationship: descendant, child and sibling
• Use attribute selectors
• Choose the simplest selector that works

Explanation#

Basic: p (all paragraphs), .card (class="card"), #logo (id="logo"), * (everything).

Combined: button.primary means a button that also has class primary (no space).

Relationships: .nav a (any a inside .nav — descendant, with a space); ul > li (direct children only); h2 + p (the p right after an h2); h2 ~ p (all p siblings after an h2).

Attribute: [type="email"], a[target="_blank"], a[href^="https"] (starts with), img[src$=".svg"] (ends with).

Prefer classes for styling. They are reusable, easy to read and have moderate specificity.

Syntax#

1p { }            /* element */
2.card { }        /* class */
3#logo { }        /* id */
4.nav a { }       /* descendant */
5ul > li { }      /* direct child */
6h2 + p { }       /* next sibling */
7[type="email"] { } /* attribute */

Code example: Selectors in action#

1<style>
2  body { font-family: sans-serif; }
3  .menu a { color: #2965f1; }            /* links inside .menu */
4  .menu > li { list-style: square; }      /* direct children of .menu */
5  h2 + p { font-weight: bold; }           /* first p after an h2 */
6  a[target="_blank"]::after { content: " ↗"; }
7  input[type="email"] { border: 2px solid #16a34a; }
8  button.primary { background: #2965f1; color: white; }
9</style>
10

11<ul class="menu">
12  <li><a href="#">Home</a></li>
13  <li><a href="https://mdn.dev" target="_blank">MDN</a></li>
14</ul>
15<h2>News</h2>
16<p>This paragraph is bold (it follows the h2).</p>
17<p>This one is normal.</p>
18<input type="email" placeholder="email"> <input type="text" placeholder="text">
19<button class="primary">Primary</button> <button>Plain</button>

Blue menu links with square bullets, an arrow after the external link, a bold first paragraph, a green email box and one blue button.

Step-by-step explanation#

1. .menu a — the space means “anywhere inside .menu”.
2. .menu > li — the > means “direct children only”.
3. h2 + p — only the paragraph immediately after the heading.
4. a[target="_blank"] — only links that open a new tab get the arrow.
5. input[type="email"] — the email input, not the text input.
6. button.primary — no space: a button that has the class primary.

Real-world use case#

Common mistakes#

Best practices#

• Style with classes; keep ids for JavaScript and anchors
• Keep selectors short (1–2 parts)
• Use attribute selectors for form types and link types
• Test selectors in DevTools with document.querySelectorAll()

Remember this#

Practice exercise#

1footer a { color: grey; }
2.steps > li { font-weight: bold; }

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.