| Simple selector |
Selecciona elementos html basado en su nombre, id o clase |
- element-name
- element-name.class-name
- .class-name
- #id-name
|
| Combinator selectors |
Selecciona elementos basado en una relación específica entre estos |
- Descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
|
| Pseudo class selectors |
Selecciona elementos basado en un cierto estado o interacción del usuario con estos |
- a:link
- a:visited
- a:hover
- a:active
|
| Pseudo-elements selectors |
Selecciona y da estilo a una parte de un elemento |
- p:first-letter,
- p:first-line
- h1::before
- h2::after
- p::selection
|
| Attribute selector |
Selecciona elementos basado en un atributo en un valor de atributo |
- a[attribute]
- p[attribute="value"]
- h1[attribute~="value1 value2 value3"]
- [attribute|="value"] -> Selecciona el elemento cuyo atributo tenga ese valor de primero
- [attribute$="value"] -> Selecciona el elemento cuyo atributo tenga ese valor al final
- [attribute^="value"] -> Selecciona el elemento cuyo atributo tenga el valor especificado o parte de él (value-set, value1, etc)
- [attribute*="value"] -> Selecciona el elemento cuyo atributo tenga el valor especificad, así sea en una parte
|