CSS Selectors

CSS selectors tell the browser which elements a rule should style. Choosing the right selector is the key to clean CSS: too broad and you style things by accident, too specific and your styles become hard to override.

Element, Class and ID Selectors

An element selector (p) matches every element of that type. A class selector (.note) matches every element with class="note". An id selector (#intro) matches the single element with id="intro". Classes are reusable and are what you will use most.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
p { color: #374151; }
.note { background: #fef3c7; padding: 8px; }
#intro { font-size: 22px; font-weight: bold; }
</style>
</head>
<body>
<p id="intro">Intro paragraph (id selector)</p>
<p>Plain paragraph (element selector)</p>
<p class="note">Paragraph with the note class</p>
<div class="note">A div can use the same class</div>
</body>
</html>

Combining Selectors

• p.note matches only <p> elements that have the note class
• .card h3 (descendant) matches h3 anywhere inside .card
• .menu > li (child) matches li elements directly inside .menu
• h2 + p (adjacent sibling) matches the first p right after an h2
• * (universal) matches every element

Descendant and Child Selectors Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.menu > li { color: crimson; }
.menu li li { color: gray; }
h2 + p { font-style: italic; }
</style>
</head>
<body>
<ul class="menu">
  <li>Direct child (red)
    <ul><li>Nested item (gray)</li></ul>
  </li>
  <li>Another direct child</li>
</ul>
<h2>Title</h2>
<p>I come right after the h2, so I am italic.</p>
<p>I am not.</p>
</body>
</html>

Attribute Selectors

Square brackets select by attribute. [type="email"] matches inputs of type email, and a[href^="https"] matches links whose href starts with https.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
input[type="email"] { border: 2px solid #2563eb; }
a[href^="https"] { color: green; }
</style>
</head>
<body>
<input type="text" placeholder="text"><br><br>
<input type="email" placeholder="email"><br><br>
<a href="https://example.com">Secure link</a> | <a href="/about">Relative link</a>
</body>
</html>

CSS Specificity: Which Rule Wins?

When two rules set the same property on the same element, the more specific selector wins. Roughly: id selectors beat class selectors, and class selectors beat element selectors. Inline style attributes beat all of them. If specificity is equal, the rule written later wins.

Avoid !important except as a last resort; it overrides normal specificity and makes CSS hard to maintain.

Frequently asked questions

What is the difference between class and id in CSS?

A class can be used on many elements and is the normal way to style things. An id must be unique on the page and has much higher specificity, so it is better kept for links and JavaScript hooks.

Can an element have multiple classes?

Yes. Separate them with spaces, like class="card featured". Every matching rule applies.

What is CSS specificity?

Specificity is the weight the browser gives a selector. Higher-weight selectors override lower ones when they conflict, regardless of order.