3.3  CSS Selectors

A selector tells CSS which HTML element(s) to style. Mastering selectors is one of the most important CSS skills.

CSS Selectors

/* ELEMENT selector — styles ALL paragraphs */

p { color: #333; }

 

/* CLASS selector — styles elements with class="highlight" */

.highlight { background-color: yellow; font-weight: bold; }

 

/* ID selector — styles ONE element with id="main-title" */

#main-title { color: darkblue; font-size: 2.5rem; }

 

/* DESCENDANT selector — only <a> tags INSIDE a <nav> */

nav a { color: white; text-decoration: none; }

 

/* MULTIPLE selectors — applies same style to h1, h2, and h3 */

h1, h2, h3 { font-family: 'Arial', sans-serif; }

 

/* PSEUDO-CLASS — styles a link when hovered */

a:hover { color: orange; text-decoration: underline; }