Web Development Resources - WET Research Documentation

Research Documentation about CSS Nesting.

CSS Nesting

Describe what on the demo page is being styled by the CSS nesting code.

Here on my research documentation page for CSS nesting, I used nesting for my wrapper to letter space my h2 elements and also adjusted the line height for my h4 elements to make the text a tad bit easier to read. For my h3 elements in the wrapper, I used font-weight to make the assignment requirements more readable. for my h4 elements.

How the ampersand was used as a nesting selector.

The way I used the ampersand as a nesting selector in my research documentation, I first edited my a:link color to be black, then with the nested ampersand I used hover to make the link red. I also used the ampersand when you hover over my h3 elements, along with the background color of my li elements which makes the background turn a very light pink color to match the color scheme of the webpage.

How you would use nesting in a project.

CSS Nesting is a great way to write clean and more organized code styles that nests rules within one another. Instead of repeating selectors for the child elements, you can write within the parent rule which reduces redundancy! If I were to use this on my projects, it will improve readability and can make maintenance of CSS code much easier to style. For example, if I have a ".wrapper", I could nest elements under that class, such as "h1", "p", and, "header". This reduces the redundancy by not having to write ".wrapper h1", ."wrapper p", ".wrapper header", and so forth.