처음 2를 선택하는 방법

처음 2를 선택하는 방법

CSS를 사용하는 요소

---

안녕하세요, 첫 번째 <p>요소에 인접한 처음 2 개 요소 (하나, 둘)에 CSS를 적용하고 싶습니다 .

<div class="one">
    <ul>
        <p>
            <li>One</li>
            <li>Two</li>
        <p>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

4 개 li요소 모두 적용 후

.one ul p:nth-child(odd) ~ li {
    background: lightsteelblue;
}

---

li내부의 처음 2 개 요소의 경우 ul p:

.one ul li:nth-child(-n+3){
    // your style
}

jsfiddle에서 참조

그리고 다른 메이트가 언급했듯이 잘못된 마크 업이 있습니다.

p요소 를 제거한 경우 다음을 시도하십시오.

.one ul li:nth-child(-n+2){
    // your style
}

jsfiddle에서 참조

업데이트 : 내 제안은 ul대신 다른 것을 사용하는 것입니다 p. 따라서 유효한 마크 업과 동일한 결과가 있습니다.

HTML

<div class="one">
    <ul>
        <li>0</li>
        <li>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>3</li>
            </ul>
        <li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

CSS :

.one ul {
    padding: 0;
    list-style-type: none;
}
.one ul ul li:nth-child(-n+2){
    // your style
}

jsfiddle 업데이트

참고 : 마지막으로, 특수 li요소가 2 개뿐이라면 클래스 이름을 간단하게 정의하지 않겠습니까? <li class="bold"> 간단하게

ul li.bold {
    // your style
}

---

이것은 IE8과 호환되어야합니다 (CSS 2.1 선택기 만 사용) :

li:first-child, li:first-child+li {
    color: blue;
}

---

First three elements you can select with e.g.

ul li:nth-of-type(-n+3) {

}

But like others mentioned, your markup is invalid and you should definitely correct it.

---

Like others already mentioned, the straightforward answer would be li:nth-child(-n+2) { ... }.

I don't know about you, but when I first learn this -n+2 part, my reaction was "what? is this a typo?". So, for those who like to know a little explanation rather than just copy-and-paste the counter-intuitive magic, here I include a link to a wonderful blog post by Sara Cope explaining the -n+2 part:

The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+2) will select the first 2 li elements.

Such explanation is even missing in the w3cshool for nth-child.

ReferenceURL : https://stackoverflow.com/questions/18672625/how-to-select-first-2-li-elements-using-css