로렘 입숨;

Aenean commodo ligula eget dolor. 전정 dapibus nunc ac augue;

눈씨 세드 투피스. Donec posuere vulputate arcu;

제목, 부제목 및 여러 단락이 있는 섹션이 있습니다. 첫 번째 단락이 1.5em 의 더 큰 글꼴 크기로 조금 눈에 띄기를 원합니다.

해당 섹션의 첫 번째 단락에 몇 가지 추가 스타일을 추가해야 하므로 섹션 p:first-child 코드를 사용해 볼 수 있습니다. 그러나 섹션의 첫 번째 자식이 h1 이므로 작동하지 않습니다. 이 경우 :first-of-type 선택기를 사용해야 합니다.

존재 전선이 유형의 선택자는 :first-of-type , :last-of-type , :nth-of-type 및 :nth-last-of-type 입니다. 그것들은 :nth-child처럼 행동하지만 특정 유형의 요소의 n번째 인스턴스를 선택합니다.

설명

:nth-child 의사 클래스는 요소 트리의 번호 지정을 기반으로 요소에 스타일을 추가하는 데 사용됩니다.

통사론

요소:n번째-자식(홀수 | 짝수 |<число> | <выражение>) {...}

가치

a 가 0이면 기록되지 않고 표기법이 b 로 축소됩니다. b가 0이면 역시 생략되고 표현식은 형식으로 작성됩니다. a 및 b는 음수가 될 수 있으며, 이 경우 더하기 기호가 빼기로 변경됩니다(예: 5n-1).

및 b에 음수 값을 사용하면 일부 결과가 음수 또는 0이 될 수도 있습니다. 그러나 요소 번호는 1부터 시작하기 때문에 요소는 양수 값에만 영향을 받습니다.

테이블에서. 1은 몇 가지 가능한 표현을 보여주고 키워드, 또한 관련 항목 번호를 나타냅니다.

HTML5 CSS3 IE Cr Op Sa Fx

에 이 예:nth-child 의사 클래스는 테이블의 첫 번째 행의 스타일을 변경하고 모든 짝수 행에 색상을 지정하는 데 사용됩니다(그림 1).

제 블로그에 오신 것을 환영합니다. 저는 오늘 CSS에서 첫 번째 부모 요소를 선택하는 방법에 대해 글을 쓰고 싶습니다. 이렇게 하면 더 적은 수의 스타일 클래스를 사용할 수 있기 때문입니다.

유사 클래스: 첫 번째 자식과 첫 번째 유형의 차이점은 무엇입니까?

CSS에서 부모 컨테이너의 첫 번째 요소를 참조하기 위해 두 개의 의사 클래스가 발명되었습니다. 나는 즉시 당신이 이해할 수 있도록 예를 들어 모든 것을 고려할 것을 제안합니다.

그런 마크 업이 있다고 가정 해 봅시다. 목표는 첫 번째 단락을 참조하고 클래스를 추가하지 않고 다른 단락과 별도로 스타일을 지정하는 것입니다. 이것은 다음과 같이 할 수 있습니다.

#wrapper p:첫 번째 자식(
색상: 빨간색;
}

첫 번째 단락의 색상이 빨간색으로 변하는 것을 확인할 수 있습니다.

#wrapper p:first-of-type(
색상: 빨간색;
}

같은 일이 일어날 것입니다. 그래서 차이점은 무엇입니까? 그리고 첫 번째 유형 의사 클래스가 해당 유형이 주어지면 부모의 첫 번째 요소를 검색하고 찾는 사실에 있으며 first-child는 아무 것도 찾지 않습니다. 단락인 경우 스타일을 적용합니다. 그렇지 않은 경우 아무 것도 선택 및 적용되지 않습니다.

이것은 단락입니다

이것은 단락입니다

이것은 단락입니다

이것은 단락입니다

이것은 단락입니다

이제 다음을 고려하십시오. 이 경우 첫 번째 유형이 작동합니까? 예, 요소 유형을 고려하고 모든 요소의 첫 번째 단락이 아닌 첫 번째 단락을 선택하기 때문입니다. 첫째 아이가 일할까요? 시도 해봐. 단락이 부모의 첫 번째 요소가 아니기 때문에 작동하지 않습니다.

개인적으로 이러한 유사 클래스의 차이점을 즉시 이해하지 못하고 잠시 혼란스러웠지만 이제 정상적으로 설명이 되었기를 바랍니다.

또 다른 중요한 세부 사항

요소는 상위 요소에서 계산되므로 다음과 같이 지정한 경우:

Li:최초(
…
}

그런 다음 body 태그(즉, 전체 페이지)의 첫 번째 목록 항목이 선택됩니다. 따라서 모든 목록에서 첫 번째 항목의 형식이 다르게 지정됩니다.
다음과 같이 작성하면:

#sidebar li:최초 유형(
…
}

그러면 사이드바에 있는 목록의 첫 번째 항목, 즉 사이트의 사이드 열만 선택됩니다.

내가 쓴 다양한 선택기를 사용하면 웹 페이지의 거의 모든 요소에 접근할 수 있습니다. 이 기사에서는 CSS에서 n번째 자식 의사 클래스를 사용하는 방법에 대해 자세히 읽을 수 있으며 요소 선택 측면에서 옵션을 제공합니다.

그건 그렇고, 나는 반대 의사 클래스인 last-child(각각 last-of-type)를 언급하는 것을 잊었습니다. 부모 컨테이너에서 마지막 요소를 선택할 수 있습니다.

실천할 수 있는 곳

나는 이러한 의사 클래스에 대해 씁니다. CSS. 예를 들어, 유사한 게시물, 댓글 또는 기타 항목의 블록이 페이지에 있습니다. 그리고 첫 번째 요소를 특별한 방식으로 장식하고 싶은 생각이 들었습니다. 아니면 마지막일 수도 있습니다. 예, 누구나 할 수 있습니다.

원하는 요소가 저장된 블록의 이름을 찾기만 하면 됩니다. 우리가 인기있는 레코드를 다루고 있다고 가정 해 봅시다. 상위 컨테이너에는 인기 있는 클래스가 있습니다. 그런 다음 다음과 같이 작성합니다.

인기있는 li:first-of-type(
패딩 상단: 20px
}

목록의 첫 번째 항목인 Everything은 위에서 들여쓰기를 받았고 스타일에 원하는 것을 추가할 수 있습니다.

여기 또 다른 예가 있습니다. body 태그에는 동일한 회색 블록이 세 개뿐입니다. 이렇게 작성해 봅시다.

의사 클래스를 사용하여 목록에서 특정 요소를 선택할 수 있습니다. 이 튜토리얼에서 우리는 :nth-child 의사 클래스, 이 의사 클래스로 무엇을 만들 수 있는지, 그리고 그것이 어떻게 유용할 수 있는지에 대해 이야기할 것입니다. :nth-child 의사 클래스를 사용하면 공통 속성을 가진 요소 그룹을 선택할 수 있습니다. 그룹에서 짝수 또는 홀수 요소를 선택하는 데 가장 일반적으로 사용됩니다. 홀수 행과 짝수 행에 서로 다른 배경색을 부여하여 테이블을 얼룩말처럼 보이게 하는 데 자주 사용됩니다.

tr:nth-child (odd) ( // 배경색 ) tr:nth-child (even) ( // 다른 배경색 )

:nth-child 의사 클래스를 사용하면 공통 속성을 가진 요소를 그룹으로 나눈 다음 다음 구문을 사용하여 각 그룹에서 특정 요소를 선택할 수도 있습니다.

Tr:n번째 자식(an+b)( )

여기 ㅏ그룹의 요소 수를 결정하고 비그룹에서 선택할 요소를 결정합니다. 값을 사용하는 경우 2n+1, 그러면 요소가 2개의 그룹으로 나뉘고 각 그룹의 첫 번째 요소, 즉 홀수 ​​서수가 있는 요소가 선택됩니다. 값을 사용하는 경우 2n+2, 그러면 요소가 다시 두 그룹으로 나뉘지만 이제 각 그룹의 두 번째 요소, 즉 일련 번호가 짝수인 요소가 선택됩니다.

:nth-child 의사 클래스를 이해하기 위한 예로서, 네 번째 요소, 즉 네 번째, 여덟 번째, 열두 번째, 열여섯 번째 등 모든 요소를 ​​선택합니다. 이를 위해 요소를 4개의 그룹으로 나누고 그런 다음 네 번째 요소마다 선택하십시오.

Tr:nth-child (4n+4 ) ( // 네 번째 요소마다 스타일 지정 )

아래는 10개의 요소 목록이며, 강조 표시하려는 요소를 선택하기 위해 :nth-child , :first-child 및 :last-child 의사 클래스를 사용합니다.

CSS:nth-child 의사 클래스를 사용하여 단일 요소 선택

:nth-child 의사 클래스를 숫자로 설정하여 참조할 그룹의 자식을 선택할 수 있습니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-child (4 ) ( 글꼴 크기: 150

CSS:nth-child 의사 클래스를 사용하여 처음 5개를 제외한 모든 요소 선택

:nth-child 의사 클래스를 다음 형식의 값으로 설정하면 엔+번호를 사용하면 다음 서수를 가진 요소부터 시작하여 모든 요소를 ​​선택할 수 있습니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-child (n+6 ) ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS:nth-child 의사 클래스를 사용하여 처음 5개 요소만 선택

:nth-child 의사 클래스를 음수 값으로 설정할 때 엔+ number, 우리는 이 서수를 가진 요소 앞에 있는 모든 요소를 ​​선택합니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-child (-n+5 ) ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS:nth-child 의사 클래스를 사용하여 모든 세 번째 요소 선택

:nth-child 의사 클래스는 시퀀스에 있는 요소 수와 원하는 요소의 서수를 지정하여 요소 시퀀스를 선택하는 데 사용할 수 있습니다. 값을 설정하면 3n+1, 첫 번째 요소부터 시작하여 모든 세 번째 요소가 선택됩니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-child (3n+1 ) ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS:nth-child 의사 클래스를 사용하여 홀수 요소만 선택

:nth-child 의사 클래스를 홀수로 설정하여 서수가 홀수인 모든 요소를 ​​선택할 수 있습니다. 즉, 첫 번째, 세 번째, 다섯 번째, 일곱 번째, 아홉 번째 등의 요소입니다. 이것은 인접한 테이블 행의 색상을 설정하는 데 매우 편리합니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-child (홀수) ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS:nth-child 의사 클래스를 사용하여 짝수 요소만 선택

이 예제는 마지막 예제와 동일하지만 이번에는 모든 짝수 요소가 선택됩니다. 즉, 두 번째, 네 번째, 여섯 번째, 여덟 번째, 열 번째 등의 요소:

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-child (짝수) ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS:first-child 의사 클래스를 사용하여 첫 번째 요소 선택

또 다른 유사 클래스:first-child는 첫 번째 요소를 선택합니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:first-child ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS:last-child 의사 클래스를 사용하여 마지막 요소 선택

:first-child 의사 클래스 외에도 요소 그룹에서 마지막 요소를 선택하는 :last-child 의사 클래스가 있습니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:last-child ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

CSS pseudo-class:nth-last-child를 사용하여 끝에서 두 번째 요소 선택

:last-child 및 :nth-child 의사 클래스의 기능을 결합하여 끝에서 요소 계산을 시작하는 :nth-last-child 의사 클래스를 사용할 수도 있습니다. 즉, 계산하여 요소를 선택할 수 있습니다. 시퀀스 번호예를 들어 10개의 요소로 구성된 그룹에서 그룹 끝에서 끝에서 두 번째 요소를 선택할 수 있습니다.

요소 1
요소 2
요소 3
요소 4
요소 5
요소 6
요소 7
요소 8
요소 9
요소 10

#selector_example li:nth-last-child (2 ) ( 글꼴 크기: 150 %; 글꼴 두께:굵게 ; 색상: 녹색 ; )

"를 사용하여 :nth-child 의사 클래스를 확인하십시오.