CSS
셀렉터

소개

통사론

• # 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 표준에 따르면 유효하지 않으므로 사용하지 않는 것이 좋습니다.

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 가 낮지 만 특이성은 낮습니다.

자세한 내용은 구문 섹션 을 참조하십시오.

결합 자

개요

참고 : 형제 선택기는 소스 문서에서 그 다음에 오는 요소를 대상으로합니다. 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 속성에 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;
}

의사 클래스 목록 :

:visited 가상 클래스는 보안상의 이유로 많은 현대의 브라우저에서 대부분의 스타일링에 더 이상 사용할 수 없습니다. 참조를 위해이 링크 를 참조하십시오.

기본 선택기

참고 : ID 값은 웹 페이지에서 고유해야합니다. 동일한 문서 트리에서 ID 값을 두 번 이상 사용하는 것은 HTML 표준 을 위반하는 것입니다.

선택기의 전체 목록은 CSS 선택기 수준 3 사양 에서 찾을 수 있습니다.

범위 입력 스타일 지정 방법

HTML

<input type="range"></input>

CSS

체크 박스가있는 전역 부울 : 선택됨 및 ~ (일반 형제 조합 자)

~ 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

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