diff --git a/5. Responsive Design and Advanced Selectors/1. ADVANCED_SELECTORS.md b/5. Responsive Design and Advanced Selectors/1. ADVANCED_SELECTORS.md index 3898db5..f6d1fbf 100644 --- a/5. Responsive Design and Advanced Selectors/1. ADVANCED_SELECTORS.md +++ b/5. Responsive Design and Advanced Selectors/1. ADVANCED_SELECTORS.md @@ -1,6 +1,7 @@ # CSS - Advanced Selectors ## Lesson Objectives + 1. Explain why we need advanced selectors 1. List advanced selectors @@ -12,50 +13,56 @@ Advanced selectors help eliminate extra classes. They provide no new functional ### Family Selectors -1. * +- * + - selects everything - useful for when you want to style everything. Can add an optional ancestor for more specificity - ```html -
- content - content - content -
- ``` -1. > + + ```html +
+ content + content + content +
+ ``` +- > + - selects an immediate child - if you want to add styling to just a child, but the parent has descendants that are similar to child - ```html - - ``` -1. ~ + + ```html + + ``` +- ~ - sibling selector - only selects subsequent siblings, not preceding siblings - ```html -

Title

-

paragraph

- -

paragraph

- ``` -1. + + + ```html +

Title

+

paragraph

+ +

paragraph

+ ``` +- + - immediate sibling selector - only selects first sibling - ```html -

Title

-

paragraph

- -

paragraph

- ``` + + ```html +

Title

+

paragraph

+ +

paragraph

+ ``` ### Attribute Selectors