Selectors are used to target specific HTML elements
There are a lot of Selectors in CSS but the "top" ones are :
ID tag is very popular and his main purpose is to be unique on the page. It is defined with the hash character "#"
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.
- Example description
- Selects the element with id="test"
- Selects all elements with class="test"
- Selects all elements
- Selects all <p> elements
- div, p
- Selects all <div> and <p> elements
- div p
- Selects all <p> elements inside a <div> element
- Selects links when mouse is over
- Selects the active link
- Insert pseudo-element after the content of <p> element
- 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
- Selects <p> element that has no children elements
- Selects every <p> element that is the first child of its parent
- Selects every <p> element that is the last child of its parent
- Selects all odd <p> element that is child of its parent
- Selects <input /> element that has the state of checked
- Selects <input /> element that is disabled
- Selects <input /> element that has the state of focus