Day 3: CSS Selectors
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.
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!
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.
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✌️!
