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!!!!