# CSS - Advanced Selectors ## Lesson Objectives 1. Explain why we need advanced selectors 1. List advanced selectors ## Explain why we need advanced selectors Advanced selectors help eliminate extra classes. They provide no new functionality, but they make your code cleaner ## List advanced selectors ### Family Selectors - `*` - selects everything - useful for when you want to style everything. Can add an optional ancestor for more specificity ```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 ``` - `~` - sibling selector - only selects subsequent siblings, not preceding siblings ```html

Title

paragraph

paragraph

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

Title

paragraph

paragraph

``` ### Attribute Selectors You can test for any attribute, not just id/class Here's our example: `link` 1. [attr] - test to see if an attribute exists - `a[href]` 1. [attr='foo'] - test an exact match - `a[href="http://www.google.com"]` 1. [attr^='foo'] - test the start of the attribute - `a[href^="http"]` 1. [attr$='foo'] - test the end of the attribute - `a[href$="com"]` 1. [attr*='foo'] - test a substring - `a[href*="w.goo"]` 1. [attr~='foo'] - test an exact word separated by space - `link` - `a[data-values~="value2"]` 1. [attr|='foo'] - test the start of a hyphenated word - `` - `html[lang|="en"]`