Nesting Selectors
Learning Objectives:
In this section, students will:
- Learn about nesting and compound CSS selectors.
- Begin to see how CSS rules can be used to target specific elements within a larger HTML document.
Nesting Selectors
Like some HTML elements, CSS selectors can also be nested together. Through combining different types of selectors, a greater specificity can be achieved.
Specificity
Through combining tags, ID, or class selectors, rules can be applied to a very specific set of element in a HTML document. They can be written in any order to find and select one or more elements.
One example might be to select an ID, “#links”, and then the A tags within that element. Written with the ID first, it would find that element and apply the specific rule.
Multiple Tags
Multiple CSS tags can be used together through using commas between them.
Compound Tags
CSS can select more than simply tags, ID, and classes in different combinations. It can also select elements based on their attributes as well.
Using square brackets, the name of the attribute, and then its value in quotation marks, one or more elements can be selected within a document.
Combining Attribute and Tag Selectors
Like other selectors, attribute selectors can be combined with others. Beyond the equal sign, there is also the “^=” (starts with), “*=” (contains), and “$=” (ends with) to help narrow down elements.
Play with the Code:
Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.
Try it Yourself:
Based on the ongoing CV example from the HTML modules, nest different selectors to create more complex style rules.
- Use a nested or compound selector to find and style an element within the CV. Consider using something like the element containing all of the Skills or an individual skill within that set to style in a different way than the rest of its set.
Test your response on Mozilla Thimble! Links to an external site.