The following table will contains all selectors in CSS that we need.
Selector | Example | Description |
---|---|---|
.class | .intro | Selects all elements with class=”intro” |
#id | #firstname | Selects the element with id=”firstname” |
* | * | Selects all elements |
element | p | Selects all <p> elements |
element, element | div, p | Selects all <div> elements and <p> elements |
element element | div p | Selects all <p> elements inside <div> elements |
element > element | div > p | Selects all <p> elements where the parent is a <div> element |
element + element | div + p | Selects all <p> elements that are placed immediately after <div> elements |
element1 ~ element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |
[attribute] | [target ] |
Selects all elements with a target attribute |
[attribute = value] | [target = _blank] |
Selects all elements with target=”_blank” |
[attribute ~= value] | [title ~= flower] | Selects all elements with a title attribute containing the word “flower” |
[attribute |= value] | [lang |= en] | Selects all elements with a lang attribute value starting with “en” |
[attribute \^= value] | a[href \^= “https”] | Selects every <a> element whose href attribute value begins with “https” |
[attribute $= value] | a[href $= “.pdf”] | Selects every <a> element whose href attribute value ends with “.pdf” |
[attribute *= value] | a[href *= “w3schools”] | Selects every <a> element whose href attribute value contains the substring “w3schools” |
:active | a:active | Selects the active link. |
::after | p:after | Insert something after the content of each <p> element. |
::before | p:before | Insert something before the content of each <p> element |
:checked | input:checked | Selects every checked <input> elements |
Thanks for your reading.
Refer: