Interactive online courses HTML Academy
2026-03-09 12:21 Diff
https://htmlacademy.org/courses/html-css-basics/css-essentials/css-selectors

The selector can be found at the beginning of the CSS rule before the curly braces, and it determines which HTML elements are formatted using the properties and values from the rule. Remember the following example:

.feature-kitten { padding-top: 60px; /* Top margin */ background-image: url("img/bottle.svg"); /* Background image */ }

The .feature-kitten string is a selector. It tells the browser to apply the property list (margin and background) to all elements whose class attribute is set to the value feature-kitten.

The simplest (and most popular) selectors are the tag and class selectors. The tag selectors contain a tag name with no < and > characters and are applied to all matching tags. The class selectors start with a period, which is followed by the class name, and they are applied to all tags with the matching class attribute. For example:

/* Selects all level 1 headings */ h1 { color: red; } /* Selects only the elements with the info class */ .info { color: blue; }

If the CSS rules differ only by their selectors, but they share the same properties and values, then they can be grouped together and separated by commas. For example:

h1, .danger { color: red; } /* Is the very same thing as */ h1 { color: red; } .danger { color: red; }

And now try using several different types of selectors. Substitute the selector in the CSS rule and see what changes.