수색…
소개
CSS 선택자는 특정 HTML 요소를 CSS 스타일의 대상으로 식별합니다. 이 항목에서는 CSS 선택기가 HTML 요소를 대상으로하는 방법에 대해 설명합니다. 셀렉터는 요소, 클래스, ID, 의사 요소 및 의사 클래스 및 패턴을 포함하여 CSS 언어에서 제공하는 50 가지가 넘는 다양한 선택 메서드를 사용합니다.
통사론
- # id
- . 클래스 이름
- : pseudo-classname
- :: pseudo-elementname
- [ attr ] / *에는 attr 속성이 있습니다. * /
- [ attr = " value "] / *는 attr 속성을 가지며 그 값은 정확히 " value "입니다. * /
- [ attr ~ = " value "] / *는 attr 속성을 가지며, 그 값은 공백으로 분리 될 때 " value "를 포함합니다. * /
- [ attr | = " value "] / *는 attr 속성을 가지며 그 값은 정확히 " value " 이거나 그 값은 " value - "로 시작합니다. * /
- [ attr ^ = " value "] / *는 attr 속성을 가지고 그 값은 " value "로 시작합니다. * /
- [ attr $ = " value "] / *는 attr 속성을 가지고 그 값은 " value "로 끝납니다. * /
- [ attr * = " value "] / *는 attr 속성을 가지고 그 값은 " value "를 포함합니다. * /
- 요소 이름
- *
비고
속성 선택자
개요
속성 선택기는 선택 기준을 적절하게 변경하는 다양한 유형의 연산자와 함께 사용할 수 있습니다. 주어진 속성 또는 속성 값의 존재를 사용하여 요소를 선택합니다.
선택기 (1) | 일치하는 요소 | 요소를 선택합니다 ... | CSS 버전 |
---|---|---|---|
[attr] | <div attr> | attr 속성 사용 | 2 |
[attr='val'] | <div attr="val"> | attr 속성 값이 val | 2 |
[attr~='val'] | <div attr="val val2 val3"> | val 이 (가) 공백으로 attr 스트 | 2 |
[attr^='val'] | <div attr="val1 val2"> | attr 의 값 이 val 시작 하는 곳 | 삼 |
[attr$='val'] | <div attr="sth aval"> | attr 의 값 이 val 끝나는 곳 | 삼 |
[attr*='val'] | <div attr="somevalhere"> | attr 에 val 곳 | 삼 |
[attr|='val'] | <div attr="val-sth etc"> | attr 의 값이 정확히 val 일 때, 또는 val 시작하여 즉시 - (U + 002D) | 2 |
[attr='val' i] | <div attr="val"> | attr 값이 val , val 의 편지 케이스 무시. | 4 (2) |
노트:
속성 값은 작은 따옴표 나 큰 따옴표로 묶을 수 있습니다. 따옴표는 전혀 사용할 수 없지만 CSS 표준에 따르면 유효하지 않으므로 사용하지 않는 것이 좋습니다.
별도의 모듈로 분리되어 있기 때문에 하나의 통합 된 CSS4 사양은 없습니다. 그러나 "레벨 4"모듈이 있습니다. 브라우저 지원을 참조하십시오 .
세부
[attribute]
지정된 속성을 가진 요소를 선택합니다.
div[data-color] {
color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>
[attribute="value"]
지정된 속성 및 값을 가지는 요소를 선택합니다.
div[data-color="red"] {
color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>
[attribute*="value"]
주어진 속성이 지정된 값을 포함하는 요소를 선택합니다 (하위 문자열로).
[class*="foo"] {
color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>
[attribute~="value"]
지정된 값이 공백으로 단락 지어진리스트에 표시되는, 지정된 속성 및 값을 가지는 요소를 선택합니다.
[class~="color-red"] {
color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>
[attribute^="value"]
지정된 속성이 값으로 시작되는 지정된 속성 및 값을 가지는 요소를 선택합니다.
[class^="foo-"] {
color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>
[attribute$="value"]
지정된 속성이 지정된 값으로 끝나는, 지정된 속성 및 값을 가지는 요소를 선택합니다.
[class$="file"] {
color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>
[attribute|="value"]
지정된 속성과 값을 가지는 요소를 선택합니다. 속성의 값이 지정된 값, 또는 지정된 값과 정확하게 일치 해, -
(U + 002D)
[lang|="EN"] {
color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>
[attribute="value" i]
속성 값이 Value
, VALUE
, vAlUe
또는 다른 대소 문자를 구별하지 않는 가능성으로 표현 될 수있는 주어진 속성 및 값을 갖는 요소를 선택합니다.
[lang="EN" i] {
color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>
속성 선택자의 특수성
0-1-0
클래스 선택기 및 의사 클래스와 동일합니다.
*[type=checkbox] // 0-1-0
즉, ID 선택기 로 선택한 경우보다 낮은 수준의 특이성에서 요소를 선택하기 위해 속성 선택기를 사용할 수 있습니다. [id="my-ID"]
는 #my-ID
가 낮지 만 특이성은 낮습니다.
자세한 내용은 구문 섹션 을 참조하십시오.
결합 자
개요
선택자 | 기술 |
---|---|
div span | 하위 선택기 ( <span> 하위 <div> ) |
div > span | 하위 셀렉터 ( <div> 의 직접 하위 요소 인 모든 <span> <div> ) |
a ~ span | 일반 형제 선택 도구 ( <a> 이후 형제 인 모든 <span> |
a + span | 인접한 형제 선택 도구 ( <a> 직후에있는 모든 <span> |
참고 : 형제 선택기는 소스 문서에서 그 다음에 오는 요소를 대상으로합니다. CSS는 그 특성상 (캐스 캐 이드) 이전 또는 상위 요소를 대상으로 할 수 없습니다. 그러나 flex
order
속성을 사용 하면 이전 형제 선택기를 시각적 미디어에서 시뮬레이션 할 수 있습니다 .
종단 연결자 : selector selector
적어도 하나의 공백 문자로 표현 된 자손 결합 자 ( )는 정의 된 요소의 하위 항목 인 요소를 선택합니다. 이 결합자는 요소의 모든 하위 항목을 선택 합니다 (하위 요소에서 하위 요소까지).
div p {
color:red;
}
<div>
<p>My text is red</p>
<section>
<p>My text is red</p>
</section>
</div>
<p>My text is not red</p>
위의 예에서 두 개의 <p>
요소는 <div>
하위 요소이므로 처음 두 개의 <p>
요소가 선택됩니다.
하위 결합 자 : selector > selector
아이 ( >
) 콤비가 지정된 요소의 자식, 또는 직접 자손 요소를 선택하는 데 사용됩니다.
div > p {
color:red;
}
<div>
<p>My text is red</p>
<section>
<p>My text is not red</p>
</section>
</div>
위의 CSS는 첫 번째 <p>
요소 만 선택합니다.이 요소는 <div>
에서 직접 파생 된 유일한 단락입니다.
두 번째 <p>
요소는 <div>
의 직접 하위 요소가 아니기 때문에 선택되지 않습니다.
인접한 형제 결합 자 : selector + selector
인접한 형제 ( +
) 결합자는 지정된 요소 바로 뒤에 오는 형제 요소를 선택합니다.
p + p {
color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>
위의 예에서는 다른 <p>
요소가 바로 앞에 오는 <p>
요소 만 선택합니다.
일반 형제 결합 자 : selector ~ selector
일반 형제 ( ~
) 결합자는 지정된 요소 뒤에 오는 모든 형제를 선택 합니다 .
p ~ p {
color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>
위 예제는 다른 <p>
요소가 앞에 오는 모든 <p>
요소를 선택합니다.
클래스 이름 선택자
클래스 이름 선택자는 대상 클래스 이름이있는 모든 요소를 선택합니다. 예를 들어 클래스 이름 .warning
은 다음 <div>
요소를 선택합니다.
<div class="warning">
<p>This would be some warning copy.</p>
</div>
클래스 이름을 더 구체적으로 대상 요소와 결합 할 수도 있습니다. 위의 예제를 토대로보다 복잡한 클래스 선택을 보여줍니다.
CSS
.important {
color: orange;
}
.warning {
color: blue;
}
.warning.important {
color: red;
}
HTML
<div class="warning">
<p>This would be some warning copy.</p>
</div>
<div class="important warning">
<p class="important">This is some really important warning copy.</p>
</div>
이 예제에서 .warning
클래스를 가진 모든 요소는 파란색 텍스트 색상을 가지며, .important
클래스를 갖는 요소는 주황색 텍스트 색상을 가지며 .important
및 .warning
클래스 이름을 모두 갖는 모든 요소는 빨간색 텍스트를 갖습니다 색깔.
CSS에서 .warning.important
선언에는 두 클래스 이름 사이에 공백이 없습니다. 즉, class
속성에 warning
및 important
라는 클래스 이름을 모두 포함하는 요소 만 찾습니다. 이러한 클래스 이름은 요소에서 순서가 다를 수 있습니다.
CSS 선언에서 두 클래스 사이에 공백이 포함되면 .warning
클래스 이름을 가진 부모 요소와 .important
클래스 이름을 가진 하위 요소 만있는 요소 만 선택합니다.
ID 선택기
ID 선택기는 타겟팅 된 ID로 DOM 요소를 선택합니다. CSS의 특정 ID로 요소를 선택하려면 #
접두사가 사용됩니다.
예를 들어, 다음 HTML div
요소 ...
<div id="exampleID">
<p>Example</p>
</div>
...는 CSS에서 #exampleID
로 아래와 같이 선택할 수 있습니다.
#exampleID {
width: 20px;
}
참고 : HTML 사양은 동일한 ID를 가진 여러 요소를 허용하지 않습니다.
가짜 클래스
의사 클래스 는 문서 트리 외부에 있거나 다른 선택자 또는 연결자가 표현할 수없는 정보를 기반으로 선택을 허용하는 키워드 입니다. 이 정보는 특정 상태 ( 상태 및 동적 의사 클래스), 위치 ( 구조 및 대상 의사 클래스), 이전 부정 코드 ( negation pseudo-class) 또는 언어 ( lang pseudo-class)의 부정에 연관 될 수 있습니다. 링크를 따라했는지 ( :visited
했는지), 마우스가 요소 ( :hover
) 위에 있는지, 체크 박스에 체크 표시 ( :checked
)인지 등의 예가 포함됩니다.
통사론
selector:pseudo-class {
property: value;
}
의사 클래스 목록 :
이름 | 기술 |
---|---|
:active | 사용자가 활성화 (즉, 클릭) 한 요소에 적용됩니다. |
:any | 그룹을 만들어 관련 선택기 세트를 만들 수 있습니다. 포함 된 항목이 일치합니다. 이는 전체 선택자를 반복하는 대신에 사용할 수 있습니다. |
:target | 현재 활성화 된 #news 요소를 선택합니다 (URL에서 클릭 함). 앵커 이름 포함) |
:checked | 선택되는 라디오, 확인란 또는 옵션 요소에 적용됩니다. 또는 "온"상태로 토글됩니다. |
:default | 그룹 중 기본값 인 모든 사용자 인터페이스 요소를 나타냅니다. 유사한 요소. |
:disabled | 사용할 수없는 상태에있는 UI 요소에 적용됩니다. |
:empty | 자식이없는 요소에 적용됩니다. |
:enabled | 활성화 된 상태에있는 모든 UI 요소에 적용됩니다. |
:first | @page 규칙과 함께 사용하면 인쇄 된 문서. |
:first-child | 부모 요소의 첫 번째 자식 요소 인 모든 요소를 나타냅니다. |
:first-of-type | 요소가 선택한 요소 유형 중 첫 번째 요소 일 때 적용됩니다. 그 부모 안에. 이것은 첫 번째 자녀 일 수도 있고 아닐 수도 있습니다. |
:focus | 사용자의 포커스가있는 요소에 적용됩니다. 이것은 사용자의 키보드, 마우스 이벤트 또는 다른 형태의 입력. |
:focus-within | 전체 섹션을 강조 표시하는 데 사용할 수 있습니다. : focus 가상 클래스가 일치하는 요소 또는 집중된 하위 클래스가있는 요소를 찾습니다. |
:full-screen | 전체 화면 모드로 표시된 요소에 적용됩니다. 전체 스택을 선택합니다. 최상위 요소뿐만 아니라 요소의. |
:hover | 사용자의 포인팅 장치가 가리키는 요소에 적용되지만 활성화되지 않았습니다. |
:indeterminate | 라디오 또는 체크 박스 UI 요소를 적용합니다. 선택되어 있지 않지만 불확정 상태입니다. 이것은 요소의 속성 또는 DOM 조작 |
:in-range | :in-range CSS 가상 클래스는 요소가있을 때 일치합니다. 이 요소의 지정된 범위 제한 내 value 속성 페이지에서 현재 정의 된 값에 대한 피드백을 제공합니다. 요소를 사용하는 것은 범위 제한 내에 있습니다. |
:invalid | 에 따라 값이 유효하지 않은 <input> 요소에 적용됩니다. type= 속성에 지정된 type= |
:lang | 줄 바꾸기 <body> 요소에있는 모든 요소에 적용됩니다. 지정된 lang= 속성. 의사 클래스가 유효하기 위해서는 반드시 유효한 2 ~ 3 자 언어 코드가 들어 있어야합니다. |
:last-child | 부모의 마지막 자식 요소 인 요소를 나타냅니다. |
:last-of-type | 요소가 선택된 요소 유형의 마지막 요소 인 경우 적용됩니다. 그것의 부모. 이것은 마지막 자식 일 수도 그렇지 않을 수도 있습니다. |
:left | @page 규칙과 함께 사용하면 모든 왼쪽을 선택합니다. 인쇄 된 문서의 페이지 |
:link | 사용자가 방문하지 않은 링크에 적용됩니다. |
:not() | 전달 된 값과 일치 하지 않는 모든 요소에 적용됩니다. ( :not(p) 또는 :not(.class-name) 예를 들어, 값이 있어야합니다. 유효하며 하나의 선택자 만 포함 할 수 있습니다. 그러나 선택기를 함께 사용 :not 여러 개의 체인을 연결할 수 있습니다. |
:nth-child | 요소가 부모의 n 번째 요소 일 때 적용됩니다. 여기서 n 정수, 수식 (예 : n+3 ) 또는 키워드 odd 하거나 even . |
:nth-of-type | 요소가 부모 요소의 n 번째 요소 인 경우 적용됩니다. 동일한 요소 유형 ( n 은 정수일 수 있음), 수학적 표현 (예 : n+3 ) 또는 키워드 odd 또는 even . |
:only-child | :only-child CSS 가상 클래스는 모든 요소를 나타냅니다. 그것은 부모의 유일한 아이입니다. 이것은 :first-child:last-child 또는 :nth-child(1):nth-last-child(1) , 그러나 더 낮은 특이성으로. |
:optional | :optional CSS 가상 클래스는 모든 요소를 나타냅니다. 필요한 속성이 설정되어 있지 않습니다. 이것은 양식을 사용하여 선택적 필드를 쉽게 나타내며 이에 따라 스타일을 지정하십시오. |
:out-of-range | :out-of-range CSS 가상 클래스는 요소에 이 요소의 지정된 범위 제한을 벗어나는 값 특성입니다. 이 페이지를 사용하면 페이지에서 현재 정의한 값이 요소가 범위 제한을 벗어났습니다. 값이 범위 밖에 있으면 값이 될 수 있습니다. 최대 및 최소 설정 값보다 작거나 큰 값. |
:placeholder-shown | 실험적. 자리 표시 자 텍스트를 현재 표시하고있는 모든 양식 요소에 적용됩니다. |
:read-only | 사용자가 편집 할 수없는 요소에 적용됩니다. |
:read-write | <input> 요소와 같이 사용자가 편집 할 수있는 요소에 적용됩니다. |
:right | @page 규칙과 함께 사용하면 인쇄 된 문서. |
:root | 문서를 나타내는 트리의 루트 요소와 일치합니다. |
:scope | CSS 의사 클래스는 참조 인 요소를 찾습니다. 선택자가 일치하는 지점. |
:target | 현재 활성화 된 #news 요소를 선택합니다 (URL에서 클릭 함). 앵커 이름 포함) |
:visited | 사용자가 방문한 링크에 적용됩니다. |
:visited
가상 클래스는 보안상의 이유로 많은 현대의 브라우저에서 대부분의 스타일링에 더 이상 사용할 수 없습니다. 참조를 위해이 링크 를 참조하십시오.
기본 선택기
선택자 | 기술 |
---|---|
* | 범용 선택기 (모든 요소) |
div | 태그 선택기 (모든 <div> 요소) |
.blue | 클래스 선택기 (클래스가 blue 모든 요소) |
.blue.red | blue 및 red 클래스를 가진 모든 요소 (Compound selector의 한 유형) |
#headline | ID 선택기 ( "id"속성이 headline 설정된 요소) |
:pseudo-class | 의사 클래스가있는 모든 요소 |
::pseudo-element | 의사 요소와 일치하는 요소 |
:lang(en) | 다음과 일치하는 요소 : lang 선언 (예 : <span lang="en"> |
div > p | 자식 선택자 |
참고 : ID 값은 웹 페이지에서 고유해야합니다. 동일한 문서 트리에서 ID 값을 두 번 이상 사용하는 것은 HTML 표준 을 위반하는 것입니다.
선택기의 전체 목록은 CSS 선택기 수준 3 사양 에서 찾을 수 있습니다.
범위 입력 스타일 지정 방법
HTML
<input type="range"></input>
CSS
효과 | 의사 선택기 |
---|---|
무지 | input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, input[type=range]::-ms-thumb |
선로 | input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=range]::-ms-track |
OnFocus | input[type=range]:focus |
트랙의 아래쪽 부분 | input[type=range]::-moz-range-progress, input[type=range]::-ms-fill-lower (현재 웹킷 브라우저에서는 불가능 - JS 필요) |
체크 박스가있는 전역 부울 : 선택됨 및 ~ (일반 형제 조합 자)
~ selector를 사용하면 JavaScript를 사용하지 않고 전역 액세스 가능 부울을 쉽게 구현할 수 있습니다.
boolean을 체크 박스로 추가하십시오.
문서의 맨 처음에는 고유 id
와 hidden
속성 집합을 원하는만큼 추가합니다.
<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />
<!-- here begins actual content, for example: -->
<div id="container">
<div id="sidebar">
<!-- Menu, Search, ... -->
</div>
<!-- Some more content ... -->
</div>
<div id="footer">
<!-- ... -->
</div>
부울 값 변경
for
속성 세트가있는 label
을 추가하여 부울을 토글 할 수 있습니다.
<label for="sidebarShown">Show/Hide the sidebar!</label>
CSS로 부울 값에 액세스하기
일반 선택기 (예 : .color-red
)는 기본 등록 정보를 지정합니다. true
/ false
셀렉터를 따라 오버라이드 할 수 있습니다.
/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>
/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>
<checkbox>
, [sibling ...]
및 <target>
은 적절한 선택 자로 바꿔야합니다. [sibling ...]
(당신이 게으른 종종 경우) 단순히 특정 선택이 될 수 *
대상이 이미 체크 박스의 형제 인 경우 또는 아무것도.
위의 HTML 구조의 예는 다음과 같습니다.
#sidebarShown:checked ~ #container #sidebar {
margin-left: 300px;
}
#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
background: #333;
}
실천 중이다.
이 글로벌 불리언의 구현을 위해이 바이올린 을보십시오.
CSS3 : 범위 내 셀렉터 예제
<style>
input:in-range {
border: 1px solid blue;
}
</style>
<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>
:in-range
CSS 가상 클래스는 요소가이 요소에 대해 지정된 범위 제한 내에 value 속성을 갖는 경우 일치합니다. 페이지를 사용하면 요소를 사용하여 현재 정의 된 값이 범위 제한 내에 있음을 알릴 수 있습니다. [1]
아동 의사 클래스
": nth-child (an + b) CSS 의사 클래스는 문서 트리에서 + b-1 형제가있는 요소를 n"에 대해 주어진 양수 또는 0 값 과 일치시킵니다 . - MDN : nth-child
의사 선택기 | 1 | 2 | 삼 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
---|---|---|---|---|---|---|---|---|---|---|
:first-child | ✔ | |||||||||
:nth-child(3) | ✔ | |||||||||
:nth-child(n+3) | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ||
:nth-child(3n) | ✔ | ✔ | ✔ | |||||||
:nth-child(3n+1) | ✔ | ✔ | ✔ | ✔ | ||||||
:nth-child(-n+3) | ✔ | ✔ | ✔ | |||||||
:nth-child(odd) | ✔ | ✔ | ✔ | ✔ | ✔ | |||||
:nth-child(even) | ✔ | ✔ | ✔ | ✔ | ✔ | |||||
:last-child | ✔ | |||||||||
:nth-last-child(3) | ✔ |
ID 선택자의 높은 특이성없이 ID를 사용하여 요소 선택
이 트릭을 사용하면 ID 셀렉터의 높은 특이성을 피하기 위해 ID를 속성 선택자의 값으로 사용하여 요소를 선택할 수 있습니다.
HTML :
<div id="element">...</div>
CSS
#element { ... } /* High specificity will override many selectors */
[id="element"] { ... } /* Low specificity, can be overridden easily */
A. : pseudo-class 예제가 아닙니다. & B : focus - CSS 의사 클래스 내에서
A. 구문은 위에 제시되어 있습니다.
다음 선택기는 HTML 문서에서 비활성화되지 않고 클래스가없는 모든 <input>
요소를 .example
. .example
:
HTML :
<form>
Phone: <input type="tel" class="example">
E-mail: <input type="email" disabled="disabled">
Password: <input type="password">
</form>
CSS :
input:not([disabled]):not(.example){
background-color: #ccc;
}
:not()
가상 클래스는 셀렉터 레벨 4에서 쉼표로 구분 된 셀렉터도 지원합니다 :
CSS :
input:not([disabled], .example){
background-color: #ccc;
}
B. the : focus-within CSS 가상 클래스
HTML :
<h3>Background is blue if the input is focused .</p>
<div>
<input type="text">
</div>
CSS :
div {
height: 80px;
}
input{
margin:30px;
}
div:focus-within {
background-color: #1565C0;
}
The : only-child 가상 클래스 선택자 예제
:only-child
CSS
가상 클래스는 부모의 유일한 자식 인 모든 요소를 나타냅니다.
HTML :
<div>
<p>This paragraph is the only child of the div, it will have the color blue</p>
</div>
<div>
<p>This paragraph is one of the two children of the div</p>
<p>This paragraph is one of the two children of its parent</p>
</div>
CSS :
p:only-child {
color: blue;
}
위의 예제는 상위 요소에서 유일한 하위 요소 인 <p>
요소를 선택합니다.이 경우 <div>
입니다.
the last-of-type selector
:last-of-type
은 부모의 특정 유형 중 마지막 하위 요소를 선택합니다. 아래 예에서 css는 마지막 단락과 마지막 제목 h1
선택합니다.
p:last-of-type {
background: #C5CAE9;
}
h1:last-of-type {
background: #CDDC39;
}
<div class="container">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>
<h1>Heading 1</h1>
<h2>First heading 2</h2>
<h2>Last heading 2</h2>
</div>