This article suggests using more CSS and less JS to construct the web UI. To realize this target, it's preferrable to get farmiliar with as many as possible of CSS features. But it's quite difficult to know all them. Another solution instead is to follow the best pratices and reduce the code quantity.
Pseudo selectors to cover in this article:
- 1. :first-line
- 2. :first-letter
- 3. ::selection
- 4. :root
- 5. :empty
- 6. :only-child
- 7. :first-of-type
- 8. :last-of-type
- 9. :nth-of-type()
- 10. :nth-last-of-type()
- 11. :link
- 12. :checked
- 13. :valid
- 14. :invalid
- 15. :lang()
- 16. :not()
- References
1. :first-line
It represents the first line of text as its name implies.
Browser Compatibility: https://caniuse.com/#search=%3Afirst-line
pre:first-line {
font-size: 24px;
color: green;
}
2. :first-letter
Like first-line, it represents the first letter of the text.
Browser Compatibility: https://caniuse.com/#search=%3Afirst-line
p:first-letter {
font-size: 36px;
color: green;
}
3. ::selection
The selection selector means those text you selected and highlighted. The color is blue by default for most of the browsers.
Browser Compatibility: https://caniuse.com/#search=%3Aselection
p::selection {
background: orange;
}
4. :root
The root selector represents the root element of a document. In HTML, the root element is <html> element. In RSS, the root element is <rss> element.
In most of the modern browsers, it's used for storing custom style properties. Use var() as a getter for the stored values.
Browser Compatibility: https://caniuse.com/#search=%3Aroot
:root {
--bg-color: lightgray;
--text-color: green;
}
p {
background: var(--bg-color);
color: var(--text-color);
}
5. :empty
The empty represents an empy element. An element without space visible content or children nodes is an empty element.
Browser Compatibility: https://caniuse.com/#search=%3Aempty
p:empty {
border: 1px solid black;
height: 16px;
}
<p></p>
<p> </p>
<p><div style="display:hidden;"></div></p>
6. :only-child
The only-child represents the child node which the parent has only one child node.
Browser Compatibility: https://caniuse.com/#search=%3Aonly-child
div:only-child {
background: lightgray;
}
<div>
<p>only child</p>
</div>
7. :first-of-type
The first-of-type represents the node that is the first sibling of its type in the list of children of its parent element.
Browser Compatibility: https://caniuse.com/#search=%3Afirst-of-type
p:first-of-type {
background: lightgray;
}
<div>
<div>1</div>
<p>2</p>
<p>3</p>
</div>
8. :last-of-type
But of first-of-type, last-of-type represents the last.
Browser Compatibility: https://caniuse.com/#search=%3Alast-of-type
p:last-of-type {
background: lightgray;
}
<div>
<div>1</div>
<p>2</p>
<p>3</p>
</div>
9. :nth-of-type()
first-of-type and last-of-type only represents the first or last element. With nth-of-type, you can select the node using its index. Remember CSS indexes start from 1.
Browser Compatibility: https://caniuse.com/#search=%3Anth-of-type
P:nth-of-type(2) {
background: lightgray;
}
<div>
<div>1</div>
<p>2</p>
<p>3</p><!-- this one -->
</div>
10. :nth-last-of-type()
Different form nth-of-type, nth-last-of-type counts from last one in the children list.
Browser Compatibility: https://caniuse.com/#search=%3Alast-nth-of-type
P:nth-last-of-type(2) {
background: lightgray;
}
<div>
<div>1</div>
<p>2</p><!-- this one -->
<p>3</p>
</div>
11. :link
The link represents the unvisited <a> tag with href.
Browser Compatibility: https://caniuse.com/#search=%3Alink
a:link {
color: green;
}
12. :checked
The checked represents the checked item from check box / radio.
Browser Compatibility: https://caniuse.com/#search=%3Achecked
input:checked {
background: lightgray;
}
13. :valid
It's used in a form with validations. The valid represents the node that passed the validation.
Browser Compatibility: https://caniuse.com/#search=%3Avalid
input:valid {
border: 1px solid green;
}
14. :invalid
So to valid, invalid represents the node that didn't pass the validation.
Browser Compatibility: https://caniuse.com/#search=%3Ainvalid
input:invalid {
border: 1px solid red;
}
15. :lang()
The lang represents the node with specified language.
Browser Compatibility: https://caniuse.com/#search=%3Alang
p:lang(ja) {
color: green;
}
/* or */
p[lang|="ja"] {
color: green;
}
16. :not()
The not takes a simple selector as an argument. It represents an element that is not represented by its argument.
Browser Compatibility: https://caniuse.com/#search=%3Anot
div :not(p) {
background: lightgray;
}
<div>
<div>1</div>
<p>2</p><!-- p tag is not taking effect -->
<div>3</div>
</div>
These are the 16 pseudo selectors. Hope you've already got farmiliar with these selectors. Actually, there are a lot more pseudo selectors that are non-standards. So I neglected them. If you think this article is great, please share it on other social networks.
Thank you reading!
References
- https://www.w3schools.com/cssref/css_selectors.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Originally on pitayan.com
https://pitayan.com/posts/css-pseudo-selectors/
Top comments (1)
WHAT!!! You can select the first line!!!!