CSS Selector Quiz

转载: CSS Speedrun | Test your CSS Skills
转载: CSS selectors - CSS: Cascading Style Sheets | MDN

Enter the CSS selector, which applies to all elements with an arrow ⬅️

1
2
3
4
5
6

<ul>
  <li></li>
  ⬅️
  <li></li>
  <li></li>
</ul>

1. 💡 li:first-child

   The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

   li:first-child is right for below.

   1 2 3 4 5 6 7 8 9 10 11 12

   <ul> <li></li> ⬅️ <li></li> <li></li> <ul> <li></li> ⬅️ <li></li> <li></li> </ul> </ul>

# Level1

1
2
3
4
5
6
7
8
9

<div>
  <p></p>
  ⬅️
  <p class="foo"></p>
  <p></p>
  ⬅️
  <p></p>
  ⬅️
</div>

1. 💡 p:not(.foo)

   The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

# Level2

1
2
3
4
5
6
7
8
9
10
11
12

<ul>
  <li></li>
  <li></li>
  <li></li>
  ⬅️
  <li></li>
  <li></li>
  ⬅️
  <li></li>
  <li></li>
  ⬅️
</ul>

1. 💡 li:nth-child(2n+3)

   The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

   Functional notation <An+B>
   Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:

   • A is an integer step size

   • B is an integer offset

   • n is all nonnegative integers, starting from 0

   It can be read as the An+Bth element of a list.

# Level3

1
2
3
4
5
6
7
8

<div>
  <span></span> ⬅️
  <p>
    ⬅️
    <a></a>
    <span></span>
  </p>
</div>

1. 💡 div > *

   > direct child selector.

   * represent all elements.

# Level4

1
2
3
4
5
6
7
8
9

<div>
  <span data-item="foo"></span> ⬅️
  <span></span>
  <div>
    <span></span>
    <span data-item="bar"></span> ⬅️
    <span></span>
  </div>
</div>

1. 💡 span[data-item]

   The CSS attribute selector matches elements based on the presence or value of a given attribute.

# Level5

1
2
3
4
5
6
7
8
9
10
11

<div>
  <span></span>
  <code></code>
  <span></span>
  <p></p>
  <span></span> ⬅️ <span></span> ⬅️
  <p></p>
  <code></code>
  <span></span> ⬅️
  <p></p>
</div>

1. 💡 p ~ span

   The general sibling combinator ( ~ ) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

# Level6

1
2
3
4
5
6
7

<form>
  <input /> ⬅️
  <input disabled />
  <input /> ⬅️ <input /> ⬅️
  <button disabled></button>
  <button></button> ⬅️
</form>

1. 💡 :enabled

   The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can’t be activated or accept focus.

# Level7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div>
  <span></span>
  <p>
    <a></a>
    <span></span> ⬅️
  </p>
  <p>
    <span></span>
    <a></a>
    <span></span> ⬅️
    <span></span>
  </p>
  <a></a>
  <span></span> ⬅️
</div>

1. 💡 a + span

   The adjacent sibling combinator ( + ) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element .

# Level8

1
2
3
4
5
6
7
8
9
10
11

<div id="foo">
  <div class="foo"></div>
  ⬅️
  <div></div>
  <div>
    <div class="foo"></div>
    <div></div>
  </div>
  <div class="foo"></div>
  ⬅️
</div>

1. 💡 #foo > .foo

   The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

# Level9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div>
  <div>
    <span></span>
    <code></code> ⬅️
  </div>
  <div>
    <code></code>
    <span></span>
    <code></code> ⬅️
  </div>
  <div>
    <span></span>
    <code class="foo"></code>
  </div>
  <span></span>
  <code></code>
</div>

1. 💡 div div span + code:not(.foo)

# Comments