Selectors are used to target specific HTML elements
There are a lot of Selectors in CSS but the "top" ones are :
Type (ex: paragraph tag, header tag, strong tag...)
The ID tag is very popular and his main purpose is to be unique on the page. It is defined with the hash character "#"
The CLASS tag allow users to apply properties on all the elements that share it`s tag-name. It is defined with the full stop "."
Below you will find a short list with the most popular selectors and a few words about each of them.
- Selector
- Example description
- #test
- Selects the element with id="test"
- .test
- Selects all elements with class="test"
- *
- Selects all elements
- p
- Selects all <p> elements
- div, p
- Selects all <div> and <p> elements
- div p
- Selects all <p> elements inside a <div> element
- a:hover
- Selects links when mouse is over
- a:active
- Selects the active link
- p::after
- Insert pseudo-element after the content of <p> element
- p::before
- Insert pseudo-element before the content of <p> element
- div > p
- Selects all <p> elements that have a <div> as parent element
- div + p
- Selects each <p> element that is immediately after a <div> element
- p ~ ul
- Selects each <ul> element that is preceded by a <p> element
- p:empty
- Selects <p> element that has no children elements
- p:first-child
- Selects every <p> element that is the first child of its parent
- p:last-child
- Selects every <p> element that is the last child of its parent
- p:nth-child(odd)
- Selects all odd <p> element that is child of its parent
- input:checked
- Selects <input /> element that has the state of checked
- input:disabled
- Selects <input /> element that is disabled
- input:focus
- Selects <input /> element that has the state of focus