CSS Selector


### id is fastest & pseudo class is slowest
### CSS Selectors
|Title|
|:-:|
|[CSS pseudo elements](https://texonom.com/css-pseudo-elements-38040afa12ea4c45b82b0fc552f83429)|
|[CSS pseudo Class](https://texonom.com/css-pseudo-class-4cfda92dff23435dae4e59a65afa7189)|
|[CSS Multi Selector ](https://texonom.com/css-multi-selector-d2cea9c65d1c48c78b599a8a2a703aed)|
|[:not()](https://texonom.com/not-bcb3d52e863d4872ad7b7401dc57b481)|
|[:has()](https://texonom.com/has-b90efef91f5d4bb28383b9a8e65de928)|
|[:matches()](https://texonom.com/matches-aaeb545aa9e1459daea5844db96a27cf)|
|[:nth-child](https://texonom.com/nth-child-565e2bccf9f34bb09cac6dc1fb26e39c)|
|[:empty](https://texonom.com/empty-a15e06885bcb4c7cb7dcf6d5b6a427ef)|
|[:contains()](https://texonom.com/contains-2f2df62a96be454f99d1fadf11715084)|
|[CSS Attribute Selector](https://texonom.com/css-attribute-selector-eaeb2b2e37da4fb7b369f75da889d503)|

### Selector Performance Rank
1. id (#myid)
2. class (.myclass)
3. tag (div, h1, p)
4. adjacent sibling (h1 + p)
5. child (ul > li)
6. descendent (li a)
7. universal (*)
8. attribute (a[rel=”external”])
9. pseudo-class and pseudo element (a:hover, li:first)


### Learning Game
> [CSS Diner](https://flukeout.github.io/)

### selectors
> [Selectors Level 3](https://www.w3.org/TR/selectors-3/#selectors)

### text
> [A way to match on text using CSS locators](https://sqa.stackexchange.com/questions/362/a-way-to-match-on-text-using-css-locators)

> [CSS [attribute~=value] Selector](https://www.w3schools.com/cssref/sel_attribute_value_contains.asp)





