이러한 선택자, 보다 구체적으로 :nth-child 라는 의사 클래스가 있습니다. 다음은 사용 예입니다.
UL LI:n번째-자식(3n+3) (색상:#CCC; )
위의 CSS는 무엇을 합니까? 내부의 모든 세 번째 요소를 선택합니다. 글머리 기호 목록: 이것은 3일, 6일, 9일, 12일 등입니다. 이 표현식이 정확히 어떻게 작동하는지, 그리고 :nth-child 로 무엇을 할 수 있는지 봅시다.
그것은 모두 대괄호 사이에 무엇이 있는지에 달려 있습니다. :nth-child 선택기는 even 과 odd 의 두 가지 키워드를 허용합니다. 여기에서는 간단합니다. even은 2번째, 4번째, 6번째 등과 같은 짝수 요소를 선택하고 홀수는 1번째, 3번째, 5번째 등과 같은 홀수 요소를 선택합니다. d.
첫 번째 예에서 볼 수 있듯이 :nth-child는 표현식도 매개변수로 받아들입니다. 가장 단순한 방정식, 즉 숫자만 포함합니다. 대괄호로 묶으면 해당 번호의 요소 하나만 선택됩니다. 예를 들어 다섯 번째 요소만 선택하는 방법은 다음과 같습니다.
UL LI:nth-child(5) (색상:#CCC; )
그러나 첫 번째 예에서 3n+3으로 돌아가 보겠습니다. 어떻게 작동하며 모든 세 번째 요소가 선택되는 이유는 무엇입니까? 전체 트릭은 변수 n과 축소 대수 방정식을 이해하는 것입니다. n을 0부터 시작하는 정수 집합으로 생각하십시오. 그런 다음 방정식을 완성하십시오. 따라서 3n 은 3×n 이고 전체 방정식은 (3×n)+3 입니다. 이제 n 대신 0보다 크거나 같은 숫자를 대입하면 다음을 얻습니다.
- (3 × 0) + 3 = 3 = 세 번째 요소
- (3 × 1) + 3 = 6 = 6번째 요소
- (3 × 2) + 3 = 9 = 9번째 요소 등
nth-child(2n+1) 은 어떻습니까?
- (2 × 0) + 1 = 1 = 첫 번째 요소
- (2×1) + 1 = 3 = 세 번째 요소
- (2 × 2) + 1 = 5 = 5번째 요소 등
그래, 그만! 그것은 이상한 것과 같습니다. 그러면 이 표현을 쓰면 안 될까요? 그러나 이 경우 첫 번째 예를 지나치게 복잡하게 만들고 있지 않습니까? 3n+3 대신 3n+0 또는 더 간단한 3n을 쓰면 어떻게 될까요?
- (3 × 0) = 0 = 없음
- (3 × 1) = 3 = 세 번째 요소
- (3 × 2) = 6 = 6번째 요소
- (3 × 3) = 9 = 9번째 요소 등
따라서 보시다시피 결과는 동일하므로 +3 이 필요하지 않습니다. 방정식에서 빼기뿐만 아니라 n의 음수 값을 사용할 수 있습니다. 예를 들어, 4n-1:
- (4 × 0) - 1 = -1 = 없음
- (4 × 1) - 1 = 3 = 세 번째 요소
- (4 × 2) - 1 = 7 = 7번째 요소 등
-n을 사용하면 이상하게 보일 수 있습니다. 최종 결과가 음수이면 선택 항목에 포함되는 요소가 없기 때문입니다. 그러나 방정식을 보완하고 결과를 다시 양수로 만들면 샘플이 매우 흥미로워질 것입니다. 예를 들어 -n + 3과 같이 처음 n개의 요소를 얻을 수 있습니다.
- –0 + 3 = 3 = 세 번째 요소
- –1 + 3 = 2 = 두 번째 요소
- -2 + 3 = 1 = 첫 번째 요소
- -3 + 3 = 0 = 없음 등
SitePoint에는 멋진 표지판이 있는 멋진 가이드가 있으며 여기에 뻔뻔하게 게시할 것입니다.
| N | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
브라우저 지원
:nth-child 선택기는 에서 거의 완벽하게 지원되는 몇 안 되는 CSS 선택기 중 하나입니다. 최신 브라우저 IE8이 아닌 IE에서는 절대 지원되지 않습니다. 그래서 그것을 사용할 때 그리고 최종 결과가 점진적인 향상일 때 테이블 행 색칠과 같은 일부 인쇄 요소에 안전하게 사용할 수 있습니다. 그러나 더 심각한 경우에는 사용하지 않아야 합니다. 예를 들어, 사이트 레이아웃에 의존하거나 3x3 그리드의 모든 세 번째 블록에서 오른쪽 여백을 제거하여 행에 맞도록 합니다.
의사 클래스를 사용하여 목록에서 특정 요소를 선택할 수 있습니다. 이 튜토리얼에서 우리는 :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 의사 클래스를 확인하십시오.
:nth-child 의사 클래스는 요소 트리의 번호 지정을 기반으로 요소에 스타일을 추가하는 데 사용됩니다.
표기법
| 설명 | 예시 | |
|---|---|---|
| <тип> | 값의 유형을 지정합니다. | <размер> |
| 에이앤비 | 값은 지정된 순서대로 출력되어야 합니다. | <размер> && <цвет> |
| 에이 | 비 | 제안된 값(A 또는 B) 중 하나만 선택해야 함을 나타냅니다. | 정상 | 작은 모자들 |
| 에이 || 비 | 각 값은 단독으로 사용하거나 임의의 순서로 다른 값과 조합하여 사용할 수 있습니다. | 너비 || 세다 |
| 그룹 값. | [ 자르기 || 십자가] | |
| * | 0회 이상 반복합니다. | [,<время>]* |
| + | 한 번 이상 반복합니다. | <число>+ |
| ? | 지정된 유형, 단어 또는 그룹은 선택 사항입니다. | 삽입? |
| (A,B) | 최소한 A를 반복하되 B회 이하로 반복합니다. | <радиус>{1,4} |
| # | 쉼표로 구분하여 한 번 이상 반복합니다. | <время># |
가치
홀수 모든 홀수 요소 번호. 짝수 모든 짝수 요소 번호.<число>일련 번호 자식 요소부모에 대해. 번호 매기기는 목록의 첫 번째 요소가 되는 1부터 시작합니다.<выражение>a±b 로 지정되며, 여기서 a와 b는 정수이고 n은 0, 1, 2... 값을 자동으로 취하는 카운터입니다.
a 가 0이면 기록되지 않고 표기법이 b 로 축소됩니다. b가 0이면 역시 생략되고 표현식은 형식으로 작성됩니다. a 및 b는 음수가 될 수 있으며, 이 경우 더하기 기호가 빼기로 변경됩니다(예: 5n-1).
및 b에 대해 음수 값을 사용하면 일부 결과는 음수 또는 0이 될 수도 있습니다. 그러나 요소 번호는 1부터 시작하기 때문에 요소는 양수 값에만 영향을 받습니다.
테이블에서. 1은 몇 가지 가능한 표현과 키워드를 나열하고 어떤 요소 번호가 포함될 것인지를 나타냅니다.
| 의미 | 항목 번호 | 설명 |
|---|---|---|
| 1 | 1 | 첫 번째 요소는 :first-child 의사 클래스의 동의어입니다. |
| 5 | 5 | 다섯 번째 요소. |
| 2n | 2, 4, 6, 8, 10,… | 모든 짝수 요소는 even 에 해당합니다. |
| 2n+1 | 1, 3, 5, 7, 9,… | 모든 홀수 요소는 odd 와 동일합니다. |
| 3n | 3, 6, 9, 12, 15,… | 세 번째 요소마다. |
| 3n+2 | 2, 5, 8, 11, 14,… | 두 번째 요소부터 세 번째 요소마다. |
| n+4 | 4, 5, 6, 7, 8,… | 처음 세 개를 제외한 모든 요소. |
| -n+3 | 3, 2, 1 | 처음 세 가지 요소. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| 조차 | 2, 4, 6, 8, 10,… | 모든 짝수 요소. |
| 이상한 | 1, 3, 5, 7, 9,… | 모든 이상한 요소. |
요소 범위를 선택하기 위해 두 개의 :nth-child 의사 클래스를 결합하는 것이 허용됩니다. 여기서는 두 번째부터 다섯 번째까지의 모든 요소가 선택됩니다.
:n번째 자식(n+2):n번째 자식(-n+5) ( … )
예시
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| 기름 | 16 | 34 | 62 | 74 | 57 |
| 금 | 4 | 69 | 72 | 56 | 47 |
| 목재 | 7 | 73 | 79 | 34 | 86 |
| 돌 | 23 | 34 | 88 | 53 | 103 |
에 이 예:nth-child 의사 클래스는 테이블의 첫 번째 행의 스타일을 변경하고 모든 짝수 행에 색상을 지정하는 데 사용됩니다(그림 1).
쌀. 1. 테이블 행에 pseudo-class:nth-child 적용
사양
각 사양은 여러 단계의 승인을 거칩니다.
- Recommendation(권고) - 규격은 W3C에서 승인하고 표준으로 권장합니다.
- 후보자 추천( 가능한 권장 사항) - 표준을 담당하는 그룹이 목표를 충족한다고 만족하지만 표준을 구현하려면 개발 커뮤니티의 지원이 필요합니다.
- 제안된 권장 사항( 추천 추천) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문 위원회에 제출됩니다.
- 작업 초안 - 커뮤니티 검토를 위해 토론 및 수정을 거친 후 초안의 더 성숙한 버전입니다.
- 편집자 초안( 편집 초안)는 프로젝트 편집자가 변경한 후 표준의 초안 버전입니다.
- 초안 ( 사양 초안)은 표준의 첫 번째 초안 버전입니다.
제 블로그에 오신 것을 환영합니다. 저는 오늘 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 의사 클래스는 요소 트리의 번호 지정을 기반으로 요소에 스타일을 추가하는 데 사용됩니다.
통사론
요소:n번째-자식(홀수 | 짝수 |<число> | <выражение>) {...}
가치
홀수 모든 홀수 요소 번호. 짝수 모든 짝수 요소 번호. number 부모를 기준으로 한 자식의 서수입니다. 번호 매기기는 목록의 첫 번째 요소가 되는 1부터 시작합니다. expression an+b 로 지정됩니다. 여기서 a와 b는 정수이고 n은 0, 1, 2... 값을 자동으로 취하는 카운터입니다.a 가 0이면 기록되지 않고 표기법이 b 로 축소됩니다. b가 0이면 역시 생략되고 표현식은 형식으로 작성됩니다. a 및 b는 음수가 될 수 있으며, 이 경우 더하기 기호가 빼기로 변경됩니다(예: 5n-1).
및 b에 음수 값을 사용하면 일부 결과가 음수 또는 0이 될 수도 있습니다. 그러나 요소 번호는 1부터 시작하기 때문에 요소는 양수 값에만 영향을 받습니다.
테이블에서. 1은 몇 가지 가능한 표현과 키워드를 나열하고 어떤 요소 번호가 포함될 것인지를 나타냅니다.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| 기름 | 16 | 34 | 62 | 74 | 57 |
| 금 | 4 | 69 | 72 | 56 | 47 |
| 목재 | 7 | 73 | 79 | 34 | 86 |
| 돌 | 23 | 34 | 88 | 53 | 103 |
이 예에서 :nth-child 의사 클래스는 테이블의 첫 번째 행의 스타일을 변경하고 모든 짝수 행에 색상을 지정하는 데 사용됩니다(그림 1).