: nth-Child () 및 : nth-of-type () 의사 클래스를 어떻게 사용합니까?

: nth-Child () 및 : nth-of-type () 의사 클래스를 어떻게 사용합니까?

CSS의 :nth-child() 및 :nth-of-type() 의사 클래스는 모 컨테이너의 위치에 따라 요소를 선택하는 데 사용됩니다. 다음은 각각 사용 방법에 대한 자세한 내용입니다.

사용 : nth-Child ()

:nth-child() 의사 클래스는 유형에 관계없이 동일한 부모 내의 모든 형제 자매의 위치에 따라 요소를 선택합니다. 구문은 다음과 같습니다.

 <code class="css">:nth-child(an b)</code>

여기서 a 와 b 는 정수이고 n 0에서 시작하는 카운터입니다. 일반적인 패턴에는 다음이 포함됩니다.

<li> :nth-child(2) : 두 번째 자식 요소를 선택합니다. <li> :nth-child(odd) : 모든 홀수 자식 요소를 선택합니다. <li> :nth-child(even) : 균등 한 어린이 요소를 모두 선택합니다. <li> :nth-child(3n) : 모든 세 번째 아동 요소 (3, 6, 9 등)를 선택합니다. <li> :nth-child(3n 1) : 첫 번째 (1, 4, 7 등)부터 시작하는 모든 세 번째 어린이 요소를 선택합니다.

예제 사용 :

 <code class="html"><ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul></code>

 <code class="css">li:nth-child(2) { background-color: yellow; }</code>

이것은 두 번째 <li> 요소에 노란색 배경을 적용합니다.

사용 : nth-of-type ()

:nth-of-type() 의사 클래스는 비슷하지만 동일한 유형의 형제 자매들 사이의 위치에 따라 요소 만 선택합니다. 구문은 다음과 동일합니다 :nth-child() :

 <code class="css">:nth-of-type(an b)</code>

예제 사용 :

 <code class="html"><ul> <li>First item</li> <p>Some text</p> <li>Second item</li> <p>More text</p> </ul></code>

 <code class="css">li:nth-of-type(2) { background-color: yellow; }</code>

이것은 두 번째 <li> 요소에 노란색 배경을 적용하지만 <p></p> 요소에는 영향을 미치지 않습니다.

CSS의 Nth-Child ()와 : nth-of-type ()의 주요 차이점은 무엇입니까?

:nth-child() 와 :nth-of-type() 의 주요 차이점은 다음과 같습니다.

<li>

요소 유형 고려 사항 :

<li> :nth-child() 자신의 유형에 관계없이 모든 자식 요소를 계산합니다. 그것은 모든 형제들 사이에서 요소의 위치를 ​​고려합니다. <li> :nth-of-type() 동일한 요소 유형의 형제 만 계산합니다. 선택에있어 더 구체적입니다.
<li>

선택기 정밀도 :

<li> :nth-child() 모든 요소를 ​​계산하기 때문에 특정 유형의 요소를 대상으로하는 경우 덜 정확합니다. <li> :nth-of-type() 사용하면 유형별로 요소를보다 정확하게 타겟팅 할 수 있으며, 이는 특정 시나리오에서 더 효율적 일 수 있습니다.
<li>

사용 시나리오 :

<li> 사용 :nth-child() 유형에 관계없이 모든 형제 자매의 위치에 따라 요소를 선택 해야하는 경우. <li> 사용 :nth-of-type() 동일한 유형의 형제 자매들 사이의 위치에 따라 요소를 선택하려면.

웹 개발에서 Nth-Child () 대 : nth-of-type ()의 예를 제공 할 수 있습니까?

사용 : nth-Child () 예 :

다른 유형의 요소의 그리드 레이아웃이 있다고 가정하고 요소 유형에 관계없이 모든 세 번째 항목을 스타일링하려고합니다.

 <code class="html"><div class="grid"> <div>Item 1</div> <p>Item 2</p> <span>Item 3</span> <div>Item 4</div> <p>Item 5</p> <span>Item 6</span> </div></code>

 <code class="css">.grid :nth-child(3n) { background-color: lightblue; }</code>

이 경우 :nth-child(3n) 요소 유형에 관계없이 세 번째 항목 (항목 3 및 항목 6)을 스타일링합니다.

사용 : nth-of-type () 예 :

동일한 그리드 레이아웃에서 매번 <div> 요소를 스타일링하려면 :<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;grid&quot;&gt; &lt;div&gt;Item 1&lt;/div&gt; &lt;p&gt;Item 2&lt;/p&gt; &lt;span&gt;Item 3&lt;/span&gt; &lt;div&gt;Item 4&lt;/div&gt; &lt;p&gt;Item 5&lt;/p&gt; &lt;span&gt;Item 6&lt;/span&gt; &lt;div&gt;Item 7&lt;/div&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;.grid div:nth-of-type(2n) { background-color: lightgreen; }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 이 예에서 <code>:nth-of-type(2n) 매번 <div> 요소 (항목 4 및 항목 7)마다 스타일을 지정합니다.<h3> 더 나은 성능을 위해 다음을 사용하여 CSS 선택기를 최적화하려면 어떻게해야합니까?</h3> <p> 더 나은 성능을 위해 다음 전략을 고려하기 위해 <code>:nth-child() 및 :nth-of-type() 사용하여 CSS 선택기를 최적화하려면 다음과 같은 전략을 고려하십시오.

<li>

특이성 및 선택기 효율성 :

<li> 사용 :nth-of-type() :nth-child() 특정 유형의 요소를 구체적으로 타겟팅 해야하는 경우. 브라우저가 관련없는 요소를 처리 할 필요가 없으므로 더 효율적일 수 있습니다. <li> 일치의 오버 헤드를 줄이기 위해 선택기를 필요한만큼 구체적으로 유지하지만 가능한 한 일반적으로 유지하십시오.
<li>

DOM Traversal 최소화 :

<li>

결합 :nth-child() 또는 :nth-of-type() 와 클래스 선택기와 함께 필요한 DOM 트래버스를 줄일 수 있습니다. 예를 들어:

 <code class="css">.list-item:nth-child(2) { /* Style properties */ }</code>

로그인 후 복사

이것은 클래스 .list-item 가진 두 번째 아이를 대상으로하며, 모든 어린이를 검색하는 것보다 더 효율적일 수 있습니다.

<li>

깊은 둥지를 피하십시오 :

<li>

깊게 중첩 된 선택기는 성능을 늦출 수 있습니다. 사용 :nth-child() 또는 :nth-of-type() 지나치게 구체적인 선택기의 필요를 피할 수 있습니다. 예를 들어:

 <code class="css">ul li:nth-child(2) { /* Instead of */ /* ul > li > ul > li:nth-child(2) */</code>

로그인 후 복사
<li>

제한 선택기 복잡성 :

<li> 선택기를 단순하게 유지하고 너무 많은 의사 클래스를 결합하지 마십시오. 예를 들어, 단일 :nth-child(2) 의사 클래스와 속성 선택기의 복잡한 조합보다 더 나은 성능을 발휘할 수 있습니다.
<li>

CSS 전 처리기 사용 :

<li> SASS 이하와 같은 CSS 전 처리기는보다 관리 가능하고 효율적인 CSS를 작성하는 데 도움이 될 수 있습니다. 복잡한 선택기를 관리하고 반복을 피하고 간접적으로 더 나은 성능으로 이어질 수 있습니다.

이러한 전략을 구현하면 :nth-child() 및 :nth-of-type() 의 사용이 성능에 최적화되어 있는지 확인할 수 있습니다.