CSS nth:자식 선택자

2136 단어 csswebdevhtmlbeginners
안녕하세요 여러분 오늘은 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 <--

    이 게시물도 확인하십시오.
    비트 치트 시트(C++)
    React의 시그널 소개 🚥

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage