Content is the realm of HTML, but style is firmly the territory of CSS. While beginners are often taught about creating CSS documents to house these stylistic attributes, less is said about applying this work to individual elements.
When we connect everything, it only works because we have CSS selectors available to make it work. In this series of exercises, we’ll be discovering how selectors like Classes, IDs, and descendant selectors work and the best practices involved with writing quality CSS.
The basic selectors
Any time CSS is used to style content in HMTL, we target a structural element to manipulate with our code.
In the example below, you’ll see a wide variety of selector styles. If this looks intimidating at all, don’t worry. Once you understand the dynamics behind what you are seeing, it will make a lot more sense.
Element selectors
These simple selectors directly target HTML elements without any additional properties added to the HTML. In the example above, <section>, <h1>, and <p> tags are each being used in this manner.
Because we’re targetting tags, these styles will be applied to every instance of that tag present in the document — unless it is overwritten via CSS Specificity. This principle is on display in the example above as the <section> and <p> styles are overwritten by a more specific style.
Class selectors
When a designer wants to add specific styles to many elements, but not all elements, then a class selector is a logical choice. Class selectors written in CSS begin with a period .exampleName { property: value; } and are appended to HTML tags using class + equal sign + quotes <tag class="exampleName">.
Choosing how to name a class selectors can be complicated if you don’t know the boundaries. A class selector can begin with an underscore (_), a hyphen (-), or a letter(a–z). That means no classes that begin with a number or other special characters.
ID selectors
When we want to target one specific element within our project, the ID selector is the ideal solution. ID selectors written in CSS begin with a hash #exampleName { property: value; }. Similar to classes, IDs are appended to HTML tags using ID + equal sign + quotes <tag ID="exampleName">.
As a best practice, designers are taught to only use a specific ID once in a project. Using a particular ID more than once won’t break a project by itself, but because we often utilize IDs with JavaScript, you can create many problems for yourself if you stray from the suggested usage.
IDs also carry the highest level of specificity of the elements we’ve discussed. In the example below, the ID selector is overwriting other styles associated with the element. You’ll also notice that the ID didn’t wipe away the height property values dictated by the element selector. This is an example of how inheritance works in CSS. Once styles are created, they will continue to cascade down until they are specifically overwritten.
Child and descendant selectors
The parent-child relationship is a consistent pattern in web design that we can leverage to target elements without having to always resort to writing classes or IDs.
Child selectors div > p {} and descendant selectors div p {} are very similar in that they target items that are nested within other elements. They differ in scope, as child selectors only target items that direct children of a parent element. Descendant selectors target all elements within a parent element regardless of their location within the parent.
In the example below, a child selector, article > ul, is targetting ul elements inside article elements. Similarly, a descendant selector, article ul, is also targetting ul elements, but the descendant selector impacts all ul elements regardless of where they reside within the article.
To really understand why some ul content is displayed differently, focus less on the CSS and more on how the HTML is constructed. The ul that is displayed with black text is within a div. This means that it is not a direct child of the article, which means the child selector can not impact it.
The space-saving comma
There are instances when you’ll want to apply the same basic properties to different selectors. Instead of writing separate rules for each, use a comma to apply the same properties to each selector. The examples below all impact the targetted selectors, but you minimize the amount of repeated code you have to write by using a comma.
Resources for review
Please use the following items to guide your exercise attempt:
| Article/Video | Source/Author |
|---|---|
| How CSS inheritance works | Mozilla |
| Specifics on CSS Specificity | CSS Tricks |
Exercise
Length: Around an hour to complete.
In this exercise, three different challenges gradually increase in complexity. An understanding of how to apply and create CSS selectors will be required to complete the work that follows. You will not need to modify the HTML structure to recreate the solution.
- Exercise 1: CSS Nav - CodePen | Finished example
- Exercise 2: CSS Tiger King - CodePen | Finished example
- Exercise 3: CSS Brick House - CodePen | Finished example
Fork the Codepen exercise and rename it before beginning your work.
///
Once complete, update your Program Journal with a link to this exercise’s final output. Post your Journal in the #Feedback-Loop channel for review.
///
Up next CSS Box Model