Learning CSS: Part 2: Nesting Selectors

Learning CSS

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

Screenshot 2018-09-10 12.32.12

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

Screenshot 2018-09-10 12.35.40

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

Screenshot 2018-09-10 12.40.21

Multiple CSS tags can be used together through using commas between them.

Screenshot 2018-09-10 12.42.12

Compound Tags

Screenshot 2018-09-10 12.46.15

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.

Screenshot 2018-09-10 12.47.36

Combining Attribute and Tag Selectors

Screenshot 2018-09-10 12.54.28

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.

Screenshot 2018-09-10 13.09.59

Codepen Example:

See the Pen Learning CSS: Part 2: Nesting Selectors by Dan Cox (@videlais) on CodePen.

Mozilla Thimble:

Remix on Mozilla Thimble!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s