Learning CSS
- Part 1: Introducing Selectors
- Part 2: Nesting Selectors
- Part 3: Backgrounds and Colors
- Part 4: Margins, Borders, and Padding
- Part 5: Positioning
- Part 6: Working with Fonts
Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.
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 through using compound tags.
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.
Codepen Example:
See the Pen Learning CSS: Part 2: Nesting Selectors by Dan Cox (@videlais) on CodePen.
Digital Ephemera 