One notable reason for getting more creative with your CSS selectors is that it keeps you from having to pepper your markup with unnecessary classes. Writing lean HTML is great for SEO because you are (hopefully) describing your data in a more efficient manner and the search bots have less to dig through to read your content. Here is the syntax of the most popular new selectors in CSS3. To see a comprehensive list, follow this .
| CSS Selectors | |||||
| Selector | Description | Example | |||
| * | Applies the style to every element in the document | * {color: red} | |||
| e | Applies the style to the element e | name {color:red} | |||
| e1, e2, … | Applies the style to each of the named elements | title, subtitle {color:red} | |||
| e f | Matches any element f that is a descendant of the element e | models description {color:red} | |||
| e > f | Matches any element f that is a direct child of an element e | model > name {color:red} | |||
| e + f | Matches any element f that is immediately preceded by a sibling element e | title + subtitle {color:red} | |||
| [att] | Matches an element containing the attribute att | name[category]{color:red} | |||
| [att="val"] | Matches an element whose att attribute value equals val | name[category="city"]{color:red} | |||
| [att~="val"] | Matches an element whose att attribute value is a space-separated list of words, one which is exactly val | name[category~="c"]{color:red} | |||
| [att|="val"] | Matches an element whose att attribute value is a hyphen-separated list of words beginning with val | name[category|="c"]{color:red} | |||
| [att^"val"] | Matches an element whose att attribute value begins with val (CSS3) | name[category^="c"]{color:red} | |||
| [att$="val"] | Matches an element whose att attribute value ends with val (CSS3) | name[category$="y"]{color:red} | |||
| [att*="val"] | Matches an element whose att attribute value contains val (CSS3) | name[category*="it"]{color:red} | |||