CSS 選擇器：如何只選中第一個 <li> 元素

此文章是 FrontendMaster 上的 Advanced Web Development Quiz 課程筆記

問題

Which of the CSS (pseudo) selectors can we use to only target the first list item <li>One</li>? Select all the correct answers.

<div>
    <ul>
        <li>One</li>
        <ul>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </ul>
    <ul>
        <li>Four</li>
    </ul>
</div>

[a] ul:first-child > li [b] ul:first-child + li [c] ul:first-child > li:first-child [d] ul:first-of-type > li:first-of-type [e] ul:first-child + li:first-child

:first-child

在父元素的所有直接子元素中，排第一個的那個元素

下面的範例中，<li>One</li>、<li>Three</li> 會被套用紅色

<ul>
    <li>One</li>
    <li>Two</li>
</ul>
<ul>
    <li>Three</li>
    <li>Four</li>
</ul>

li:first-child {
    color: red;
}

:first-of-type

在父元素的所有直接子元素中，第一個「該標籤類型」的元素

下方範例中，<span>Span 1</span> 就會被套用紅色

<div>
    <p>Paragraph</p>
    <span>Span 1</span>
    <span>Span 2</span>
</div>

span:first-of-type {
    color: red;
}

> 子代選擇器 child combinator

只選到「直接子元素」，不包含更深層的後代

下方範例只有 <span>Span 1</span>、<span>Span 2</span> 兩個元素會被套用紅色

<div id="container">
    <span>Span 1</span>
    <span>Span 2</span>
    <div>
        <span> Span 3 </span>
    </div>
</div>

#container > span {
    color: red;
}

+ 相鄰兄弟選擇器 adjacent sibling combinator

只選到「緊接在某元素後面的下一個同層兄弟元素」。

下方範例只有 <p>Paragraph 1</p> 會被套用紅色

<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

h2 + p {
    color: red;
}

答案

[a] ul:first-child > li [c] ul:first-child > li:first-child