수색…


소개

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 "를 포함합니다. * /
  • 요소 이름
  • *

비고

  • 때때로 당신은 이중 콜론 (볼 :: 대신 하나의)을 ( : ). 이것은 가상 클래스의사 요소 와 분리하는 방법입니다.
  • (오래된 브라우저, 인터넷 익스플로러 8과 같은 단일 콜론 지원 : ) 의사 요소를 정의합니다.
  • 의사 클래스와 달리 선택자 당 하나의 의사 요소 만 사용할 수 있습니다 (존재하는 경우 선택자의 주체를 나타내는 단순 선택자 시퀀스 뒤에 나타나야 함) ( W3C 사양 의 이후 버전에서는 선택기 당 여러 의사 요소가 허용 될 수 있음) ).

속성 선택자

개요

속성 선택기는 선택 기준을 적절하게 변경하는 다양한 유형의 연산자와 함께 사용할 수 있습니다. 주어진 속성 또는 속성 값의 존재를 사용하여 요소를 선택합니다.

선택기 (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"> attrval
[attr|='val'] <div attr="val-sth etc"> attr 의 값이 정확히 val 일 때,
또는 val 시작하여 즉시
- (U + 002D)
2
[attr='val' i] <div attr="val"> attr 값이 val ,
val 의 편지 케이스 무시.
4 (2)

노트:

  1. 속성 값은 작은 따옴표 나 큰 따옴표로 묶을 수 있습니다. 따옴표는 전혀 사용할 수 없지만 CSS 표준에 따르면 유효하지 않으므로 사용하지 않는 것이 좋습니다.

  2. 별도의 모듈로 분리되어 있기 때문에 하나의 통합 된 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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

[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>

JSBin의 라이브 데모

속성 선택자의 특수성

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>

JSBin의 라이브 데모

위의 예에서 두 개의 <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>

JSBin의 라이브 데모

위의 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>

JSBin의 라이브 데모

위의 예에서는 다른 <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>

JSBin의 라이브 데모

위 예제는 다른 <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 속성에 warningimportant 라는 클래스 이름을 모두 포함하는 요소 만 찾습니다. 이러한 클래스 이름은 요소에서 순서가 다를 수 있습니다.

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을 체크 박스로 추가하십시오.

문서의 맨 처음에는 고유 idhidden 속성 집합을 원하는만큼 추가합니다.

<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;
}

JSBin의 라이브 데모

배경 구문은 여기를 참조 하십시오 .

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> 입니다.

JSBin의 라이브 데모

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>

여기에 이미지 설명을 입력하십시오.

jsFiddle



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow