Advanced CSS Selectors

CSS Advanced Selectors offer some more specific ways to target HTML elements with CSS. Throughout the course we will be using a variety of these selectors primarily for layout.

CSS Attribute Selector

We've seen attributes on elements before. A class is an attribute, the source of an image is an attribute, and the href of an anchor is another attribute. We can select any attribute inside the brackets.

Professor Steve's CSS Attribute Selector Video

:before and :after

We can attach stylistic attributes before and after the text content of an element. This is commonly used to load icons with navigation elements.

:first-child/:last-child

The first and last paragraph inside each .content-box will have the top and bottom margin removed. This is done so an even spacing can be provided with padding by the .content-box while the paragraphs inside retain their spacing between each other.

CSS Adjacent Sibling Selector

If there is a paragraph next to(below) a header 2 element, bold the paragraph.

Professor Steve's CSS Sibling Selector Video

Debugging with the * Selector

A common debugging practice is adding a border around ever element on your HTML document. This helps show where content modules might be breaking your layout.

:nth-child(#)

Select element:

Professor Steve's nth Child Video

:nth-child(odd)

Select every odd number:

:nth-child(#n + #)

Every # of Elements Starting at (Every third element starting at the third element).

:nth-child(n + #)

From # Down: