Selectors allow us to tell the browser which elements on the page we want to style.
In some cases, you’re going to want to apply styles broadly, to a number of elements all across your site.
In other situations, you’re going to want to target a smaller number of elements, or even a single element.
Element Selectors are global, meaning, they’re going to affect every element of that type in a styled document.
Unlike HTML, we don’t need the angle brackets around the tag name, just the tag itself. For example, to style paragraphs, you’ll use the ‘p‘, for headings, you’d use an ‘h1‘, for unordered list, you’d use a ‘ul‘.
Classes are HTML attributes that can be set on any HTML element. You can name a class anything you want and you can use it on as many elements and as many times on the page as you need.
That makes classes pretty popular when it comes to writing CSS. For example, the browser would look through all the elements on the page and apply styling to any elements with the class attribute of “subheading”.
ID Selectors are similar to Class Selectors in that they represent an HTML attribute. They differ from classes in one very important aspect: IDs must be unique to the page. Meaning that if you assign an ID to a page element, no other element on that page may have that specific ID.
In this example, the browser would find the element on the page that has the ID attribute of “sidebar” and then apply the styling.
You can also make Class and ID Selectors element-specific by adding an element to the front of the selector.
This limits the styling to only elements with the specific class or specific ID applied to it. For example, here, styling will only be applied to ‘heading2’s with a class of ‘subheading’, or ‘divs’ with an ID of ‘sidebar’.
Class and ID Naming Conventions
- No white spaces or special characters
- Case sensitive
- Establish standards for your CSS and be consistent with them
Descendent Selectors allow you to target an element based on where it’s found within another element. You simply string the selectors together, separating them with white space. The parent selectors are added first, followed by each successive nested selectors.
Here, the browser would find any span elements inside of paragraph elements which were also inside of div elements.
In this first example, the browser would locate any paragraph found within a div tag and then apply the styling.
In the second one, it would find any span element inside of a paragraph, which is also inside of a div and then apply the styling.
You can also group selectors together by using commas between the selectors themselves.
This can make writing styles more efficient; by grouping selectors together, that need the same styling. Instead of writing three separate selectors like this:
You can simply write one Group Selector like this: