#css
:empty
:empty selects empty elements with no content.
For example, the following selects li elements with no content:
li:emptyBlanks are assumed to have content. So having an empty space like this will not be selected:
<li> </li>:first-child
- :first-child selects the first of its sibling elements.
:hover
- :hover selects the state where the mouse hovers over the element.
- For example, the following will change the text color to red when hovering over the p element. Move the mouse to another location and it will return to its original shape.
p:hover {
color: red;
}:nth-child()
- :nth-child() is used to select an element in a particular order among its siblings.
Grammar
:nth-child( an+b )a and b are integers. 0 and negative numbers are also possible.
n is assigned a non-negative integer, ie 0, 1, 2, 3, ... in that order.
You can also put even, odd instead of an + b.
example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
li:nth-last-child( 3n+2 ) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>Substituting 0, 1, 2, 3, ... for n, 3n+2 becomes 2, 5, 8, 11, .... Select the li elements in that order and color them red.
li:nth-child( -2n+5 ) {
color: red;
}You can determine the number of elements to select by setting a to a negative number. 5 when n is 0, 3 when n is 1, and 1 when n is 2, so the 3 odd elements are selected.
li:nth-child( 5 ) {
color: red;
}If a is 0, then b is whatever n is. You can say 0n+b, or you can just use b. The above will select the 5th element.
Writing odd instead of an + b selects odd-numbered elements, and even selects even-numbered elements.
:nth-last-child()
:nth-last-child() is used to select an element in a particular order among its siblings. The difference with :nth-child() is that it counts backwards.
Grammar
:nth-last-child( an + b )a and b are integers. 0 and negative numbers are also possible.
n is assigned a non-negative integer, ie 0, 1, 2, 3, ... in that order.
You can also put even, odd instead of an + b.
example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
li:nth-last-child( 3 ) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</body>
</html>Select the third li element from the back and make it red.
li:nth-last-child( 2n ) {
color: red;
}Substituting 0, 1, 2, 3, … for n results in 2n becoming 0, 2, 4, 6, …. Select the li elements in order from the back and color them red.
li:nth-last-child( 3n - 1 ) {
color: red;
}Substituting 0, 1, 2, 3, … for n, 3n-1 becomes -1, 2, 5, 8, …. Select the li elements in order from the back and color them red.
li:nth-last-child( n + 8 ) {
color: red;
}Substituting 0, 1, 2, 3, … for n, n+8 becomes 8, 9, 10, …. Select the li elements in order from the back and color them red.
li:nth-last-child( even ) {
color: red;
}Select even-ordered li elements from the back and color them red.
li:nth-last-child( odd ) {
color: red;
}Select the last odd numbered li element and color it red.
#css grammar #css basic #css tag #css Pseudo-class #Pseudo class #Pseudo-class #selector #css selector #empty #hover #nth-child #nth-last-child
'CSS' 카테고리의 다른 글
| HTML CSS Javascript 주석 달기 및 단축키 (0) | 2023.06.12 |
|---|---|
| [CSS] CSS / Pseudo-elements (0) | 2022.08.16 |
| [CSS] CSS / Adjacent Sibling Selector (0) | 2022.08.15 |
| [CSS] CSS / Sibling Selector (0) | 2022.08.15 |
| [CSS] CSS / Child Selector (0) | 2022.08.14 |