CSS nth:자식 선택자

안녕하세요 여러분 오늘은 CSS에서 n번째 자식 선택자를 사용하는 방법을 보여드리겠습니다.

n번째 자식 선택기를 사용하여 동일한 유형의 요소 또는 동일한 클래스 등의 그룹에서 여러 요소를 선택할 수 있습니다.

예 - "p"태그로 만든 10개의 단락이 있고 두 번째 단락마다 배경색을 검은색으로 지정하려고 한다고 가정합니다. all 및 nth-child와 함께 해당 클래스 이름을 사용하여 해당 그룹의 모든 두 번째 단락 선택

예 1 - 기본 스타일링

.paragraph:nth-child(2n){
background-color:black;
color:white;
}

클래스 이름이 "paragraph"인 그룹에서 두 번째 단락마다 배경색이 검은색이고 텍스트 색상이 흰색으로 지정됩니다

.

다음과 같이 "p"태그를 직접 선택할 수도 있습니다.

p:nth-child(2n){
background-color:black;
color:white;
}

웹 페이지에 다른 "p"태그가 있고 모든 "p"태그에 스타일을 적용하므로 권장되는 접근 방식이 아닙니다. 따라서 클래스 이름 접근 방식을 사용하는 것이 좋습니다.

예제 2 - 애니메이션과 함께 n번째 자식 사용

3개의 span 요소가 모두 동일한 클래스 이름을 갖고 있고 n번째 자식 선택자를 사용하면 3개의 span 요소 모두 다른 애니메이션 스타일과 지연이 있는 것을 볼 수 있습니다.

이 게시물을 확인해 주셔서 감사합니다.

저에게 연락하실 수 있습니다 -
인스 타 그램 -
링크드인 -
이메일 - [email protected]

^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.