CSS에서 첫 번째 자식을 선택하지 않기
-
CSS에서 첫 번째 자식을 선택하지 않으려면
:not(selector)선택기를 사용하십시오 -
CSS에서 첫 번째 자식을 선택하지 않도록
:first-child선택기를 사용하여 개별적으로 첫 번째 자식 스타일 지정
이 기사에서는 CSS 선택기를 사용하여 첫 번째 자식을 선택하지 않는 방법을 배웁니다.
CSS에서 첫 번째 자식을 선택하지 않으려면 :not(selector) 선택기를 사용하십시오
:not(selector) 선택기를 사용하여 선택된 요소가 아닌 다른 모든 요소를 선택할 수 있습니다. 따라서 CSS에서 첫 번째 자식을 선택하지 않도록 선택기를 사용할 수 있습니다. :not(selector) 선택기에서 :first-child를 선택기로 사용할 수 있습니다. 이런 식으로 첫 번째 요소를 제외한 요소의 모든 하위 항목에 스타일을 적용할 수 있습니다. 여기에서 CSS Selectors level 3가 지원되는 브라우저에서 :not 선택기를 사용할 수 있습니다.
예를 들어 HTML에서 body 태그를 만듭니다. 그런 다음 세 개의 p 태그를 작성하고 태그 사이에 원하는 내용을 작성하십시오. CSS에서 body p:not(:first-child)를 선택하고 color를 red로 설정합니다.
여기 아래 스니펫에서 본문에 단락이 포함되어 있고 첫 번째 단락을 제외한 모든 단락의 글꼴 색상이 빨간색으로 설정된 것을 볼 수 있습니다. 따라서 첫 번째 자식을 제외한 모든 자식을 선택하고 스타일을 적용할 수 있습니다. 그러나 :not 선택기에는 특정 제한 사항이 있습니다(예: 단순 선택기만 인수로 처리할 수 있음).
코드 예:
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
body p:not(:first-child) {
color: red;
}
CSS에서 첫 번째 자식을 선택하지 않도록 :first-child 선택기를 사용하여 개별적으로 첫 번째 자식 스타일 지정
:first-child 선택기를 사용하여 이전에 설정한 규칙을 재정의하는 특정 규칙을 설정할 수 있습니다. 이 기술을 사용하면 첫 번째 자식을 제외한 모든 자식의 스타일을 지정할 수 있습니다. :first-child 선택기를 사용하여 스타일을 재정의하면 첫 번째 자식이 다른 자식과 다르게 표시됩니다.
예를 들어 첫 번째 방법과 동일한 HTML 구조를 사용합니다. CSS에서 p 태그를 선택하고 color를 파란색으로 설정합니다. 다음으로 첫 번째 자식을 body p:first-child로 선택한 다음 color를 black으로 설정합니다.
여기에서 첫 번째 단락을 제외한 단락의 기본 스타일은 color: blue로 설정되지만 :first-child 선택기를 사용하여 color: black으로 재정의됩니다. 따라서 :first-child 선택기를 사용하여 첫 번째 자식을 선택하지 않을 수 있습니다.
코드 예:
p{
color:blue;
}
body p:first-child {
color: black;
}
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
