- read

Day 3: CSS Selectors

Brent Carey 53

Complex CSS Selectors

We are able to select multiple classes by chaining selectors together, using dot notation. If we want to group multiple elements to the same CSS rule we can separate the elements with a comma when selecting them. We are also able to select elements that are children or descendants of other elements by separating them with a space or a greater than(>) sign.

Some different CSS selectors.

CSS Specificity

CSS stands for cascading style sheets, the rule applied to any particular element will be the most specific rule. Element selectors have the lowest specificity as they are used to select general elements. Class selectors have a higher specificity than element selectors but IDs are more specific than classes. If two selectors are equally specific the rule defined last will be applied to the element(s). !important is the most specific rule we can have!

Specificity example.

CSS Units

CSS units are possible units of measurement for CSS properties. These units can either be absolute (px) or relative (em, rem, %, vh, vw). There are so many different-sized devices accessing the web today so using an absolute unit might not be the best choice. Relative units will change size relative to the page or the containing element, making them a great choice for a responsive website.

Different CSS units.

Closing

Diving deeper into CSS we are starting to see how it works, and how we can use it to make our websites look nice. Tomorrow we will be covering the CSS box model and finding out how to display elements on the page in different places✌️!