An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
July 6, 2021 07:52 pm GMT
Original Link: https://dev.to/dawnind/css3-selectors-cheat-sheet-6dk
CSS3 selectors Cheat Sheet
CSS Selectors
CSS selectors are utilized to select the content you need to style. In CSS Rule Set, Selectors are the part. CSS selectors select HTML elements as per their id, class, type, attribute, etc.
CSS selectors are divided into five categories:
- Simple/Basic selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-classes selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Simple Selectors
Selector | Example | Example description |
---|---|---|
#id | #firstname | Selects the element with id="firstname" |
.class | .intro | Selects all elements with class="intro" |
element.class | p.intro | Selects only elements with class="intro" |
* | * | Selects all elements |
element | p | Selects all elements |
element,element,.. | div, p | Selects all elements and all elements |
Basic Selectors
Selector | Description | Example |
---|---|---|
element | Typeselector. Matches an element. | p { color: red } |
/* matches paragraphs */ | ||
.class | Class selector. Matches the value of anclassattribute. | .warning { color: red } |
/* matches elements containing class="warning" */ | ||
#id | IDselector. Matches the value of anidattribute. | #warning { color: red } |
/* matches elements containing id="warning" */ | ||
* | Universalselector. Matches everything. | * { color: red } |
/* matches everything */ |
Attribute selectors
Selector | Description | Example |
---|---|---|
[attribute] | Matches elements containing a given attribute. | a[href] { color: red } |
/* matches a elements with an href attribute */ | ||
[attribute="x"] | Matches elements containing a given attribute with a given value. | a[href="https://dev.to/sitemap/"] { color: red } |
/* matches a elements with the attribute and value href="https://dev.to/sitemap/" */ | ||
[attribute~="x"] | Matches elements containing a given attribute with a value that contains a sub-value within a space-separated list. | abbr[title~="Style"] { color: red } |
/* matches abbr elements with a title that contains 'Style' (such as in title="Cascading Style Sheets") */ | ||
[attribute | ="x"] | Matches elements containing a given attribute with a value that contains a sub-value within a hyphen-separated list. |
/* matches html elements with a lang attribute that contains 'en' (such as in lang="en-gb") */ | ||
[attribute^="x"] | Matches elements containing a given attribute with a value that starts with something. | a[href^="http://"] { color: red } |
/* matches a elements with an href attribute, the value of which begins with 'http://' */ | ||
[attribute$="x"] | Matches elements containing a given attribute with a value that ends with something. | a[href$=".com"] { color: red } |
/* matches a elements with an href attribute, the value of which ends with '.com' */ | ||
[attribute*="x"] | Matches elements containing a given attribute with a value that contains something. | a[href*="htmldog"] { color: red } |
/* matches a elements with an href attribute, the value of which contains 'htmldog' */ |
Pseudo-classes Selectors
Selector | Description | Example |
---|---|---|
:link | Matches alink that has not been visited. | a:link { color: blue } |
:visited | Matches alink that has been visited. | a:visited { color: purple } |
:active | Matches an element that is beingactivated, such as a link being clicked on. | a:active { color: red } |
:hover | Matches an element whose box is beinghovered overby a cursor. | a:hover { text-decoration: none } |
:focus | Matches an element that hasfocus, such as one that has been tabbed to. | a:focus { border: 1px solid yellow } |
:target | Matches an element that has beenlinked to (via<a href="#x",for example). | h2:target { color: red } |
/* matches a second-level heading that has been linked to */ | ||
:lang() | Matches an element of a givenlanguage. | p:lang(fr) { color: red } |
/* matches paragraphs that are declared, or otherwise considered, as French */ | ||
:first-child | Matches thefirst childof an element. | p:first-child { color: red } |
/* matches the first child, if it is a paragraph, of an element */ | ||
:last-child | Matches thelast childof an element. | div p:last-child { color: blue } |
/* matches the last child, if it is a paragraph, of an element */ | ||
:first-of-type | Matches thefirst sibling of its typein an element. | li:first-of-type { color: red } |
/* matches the first instance of a list item inside an element */ | ||
:last-of-type | Matches thelast sibling of its typein an element. | li:last-of-type { color: blue } |
/* matches the last instance of a list item inside an element */ | ||
:nth-child() | Matches an element that is theordinal number childof its parent. | p:nth-child(3) { color: red } |
/* matches the third child, if it is a paragrpah, of an element */ | ||
:nth-last-child() | Matches an element that is theordinal number child, in reverse order, of its parent. | p:nth-last-child(2) { color: blue } |
/* matches the next-to-last child, if it is a paragraph, of an element */ | ||
:nth-of-type() | Matches an element that is theordinal number sibling of its type. | li:nth-of-type(5) { color: red } |
/* matches the fifth instance of a list item inside an element */ | ||
:nth-last-of-type() | Matches an element that is the ordinal number sibling, in reverse order, of its type. | li:nth-of-type(5) { color: red } |
/* matches the next-to-last instance of a list item inside an element */ | ||
:only-child | Matches an element if it is theonly childof its parent. | article p:only-child { color: red } |
/* matches a paragraph if it is the only child of an article element */ | ||
:only-of-type | Matches an element if it is theonly sibling of its type. | article aside:only-of-type { color: blue } |
/* matches an aside element if it is the only aside element in an article element */ | ||
:empty | Matches an element withno children, or content. | td:empty { border-color: red } |
/* matches table data cells with nothing in 'em */ | ||
:root | Matches theroot elementof a document. This will be thehtmlelement in HTML. | :root { background: yellow } |
:enabled | Matchesform control elements that are not disabled. | input:enabled { border-color: lime } |
/* matches input elements that are not disabled */ | ||
:disabled | Matchesform control elements that are disabled. | input:enabled { border-color: red } |
/* matches input elements that are disabled */ | ||
:checked | Matches a radio or checkbox typeinput element that is checked. | input:checked { outline: 3px solid yellow } |
/* matches checked input elements */ | ||
:not() | Negotiationpseudo-class. Matches an element that does not match a selector. | p:not(:first-child) { color: orange } |
/* matches paragraphs that are not first children */ |
Pseudo-elements Selectors
Selector | Description | Example |
---|---|---|
::first-line | Matches thefirst textual linein an element. | p::first-line { font-weight: bold } |
/* matches the first line in a paragraph */ | ||
::first-letter | Matches thefirst letterin an element. | p::first-letter { font-size: 2em } |
/* matches the first letter in a paragraph */ | ||
::before | Used with thecontentproperty to generate contentbeforethe initial content of an element. | h1::before { content: "*" } |
/* places an asterisk at the start of a top-level heading */ | ||
::after | Used with thecontentproperty to generate contentafterthe initial content of an element. | h1::after { content: "+" } |
/* places a plus-sign at the end of a top-level heading */ | ||
Selector | Description | Example |
selector selector | Descendantcombinator. Matches elements that are descendants of another element. | aside p { color: red } |
/* matches paragraphs inside elements containing class="warning" */ | ||
selector > selector | Childcombinator. Matches elements that are children of another element. | .warning > p { color: red } |
/* matches paragraphs that are children of elements containing class="warning" */ | ||
selector + selector | Adjacent siblingcombinator. Matches elements that immediately follow another element. | h1 + * { color: red } |
/* matches the first element to follow a top-level heading */ | ||
selector ~ selector | General siblingcombinator. Matches elements that follow another element. | h2 ~ p { color: red } |
/* matches every paragraph that follows a second-level heading */ |
CSS Group Selector
The grouping selector in CSS picks all the HTML elements with the same style definitions.
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }
To minimize the code, just apply the CSS grouping selectors. Simply group the selectors by separating each selector with a comma. Let's see the following code after CSS Grouping Selectors:
h1, h2, p { text-align: center; color: red; }
Original Link: https://dev.to/dawnind/css3-selectors-cheat-sheet-6dk
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To