CSS - 선택자 ( Selector )

박은지·2022년 4월 15일
0

기본 선택자 ( Basic Selectors )

1. 전체 선택자 ( Universal Selector )

* : ( 요소 내부의 ) 모든 요소를 선택

/* 모든 요소 선택 */

* {
  color: red;
}

2. 태그 선택자 ( Type Selector )

태그이름 : 태그이름과 일치하는 요소 선택

/* div 태그 선택 */

div {
  color: red;
}

3. 클래스 선택자 ( Class Selector )

. 클래스명 : HTML class 속성값( 클래스명 )과 일치하는 요소 선택

/* 클래스명이 box인 요고 선택 */

.box {
  color: red;
}

4. 아이디 선택자 ( ID Selector )

# ID명 : HTML id 속성값( ID명 )과 일치하는 요소 선택

/* ID명이 box인 요고 선택 */

#box {
  color: red;
}

복합 선택자 ( Combinators )

1. 일치 선택자 ( Basic Combinator )

AB : A와 B를 동시에 만족하는 요소 선택

/* div 태그이고, 클래스명이 box인 요소 선택 */

div.box {
  color: red;
}

2. 자식 선택자 ( Child Combinator )

A > B : A의 자식요소 B를 선택

/* div 태그의 자식요소 중 클래스명이 box인 요소 선택 */

div > .box {
  color: red;
}

3. 후손( 하위 ) 선택자 ( Descendant Combinator )

A B : A의 후손( 하위 ) 요소 B를 선택
         [ 주의! ]'띄어쓰기'가 선택자의 기호로 사용된다. 

/* div 태그의 후손( 하위 ) 요소 중 클래스명이 box인 요소 선택 */

div .box {
  color: red;
}

4. 인접 형제 선택자 ( Adjacent Sibling Combinator )

A + B : A의 다음 형제 요소 B 하나만 선택 

/* div 태그의 형제 요소 중 클래스명이 box인 요소 하나만 선택 */

div + .box {
  color: red;
}

5. 일반 형제 선택자 ( General Sibling Combinator )

A ~ B : A의 다음 형제 요소 중 모든 B 선택 

/* div 태그의 형제 요소 중 클래스명이 box인 모든 요소 선택 */

div ~ .box {
  color: red;
}

가상 클래스 선택자 ( Pseudo-Classes Selectors )

동작에 따른 요소의 상태

1. HOVER

A : hover : A에 마우스( 포인터 )가 올라가 있는 동안에만 A 선택 

/* 클래스명이 box인 요소 위에 마우스가 올라가 있는 동안에만 선택 */

.box:hover {
  color: red;
}

2. ACTIVE

A : active : A를 마우스( 포인터 )로 클릭하는 동안에만 A 선택 

/* 클래스명이 box인 요소를 마우스로 클릭하는 동안에만 선택 */

.box:active {
  color: red;
}

3. FOCUS

A : focus : A가 포커스 된 동안에만 A 선택 ( 대화형 콘텐츠에서 사용 가능 )

/* input 요소가 포커스 된 동안에만 선택 */

input:focus {
  border-color: red;
}

하이퍼링크 요소의 상태

A : link : 하이퍼링크 A요소에 방문한 적이 없는 상태로, 기본 색상은 파란색

/* 방문한 적이 없는 링크는 orange 색상으로 표현 */

a:link {
  color: orange;
}

5. visited

A : visited : 하이퍼링크 A요소에 한 번 이상 방문한 상태로, 기본 색상은 보라색

/* 방문한 적이 없는 링크는 yellowgreen 색상으로 표현 */

a:visited {
  color: yellowgreen;
}

input 태그의 상태

6. enabled

A : enabled : 활성화된 A요소만 선택

/* 활성화된 input 요소만 선택하여 배경색을 orange로 표현 */

input:enabled {
  background-color: orange;
}

7. disabled

A : disabled : 비활성화된 A요소만 선택

/* 비활성화된 input 요소만 선택하여 배경색을 gray로 표현 */

input:disabled {
  background-color: gray;
}

8. checked

A : checked : 체크된 A요소만 선택

/* 체크된 input 요소만 선택하여 1px의 red색상 테두리 표현 */

input:checked {
  outline: 1px solid red;
}

9. FIRST CHILD

A : first-child : A가 형제 요소 중 첫번째 요소라면 선택

/* 클래스명이 fruits인 요소의 하위 요소 li 태그중 첫번째 li 요소 선택 */

.fruits li:first-child {
  color: red;
}

10. LAST CHILD

A : last-child : A가 형제 요소 중 마지막 요소라면 선택

/* 클래스명이 fruits인 요소의 하위 요소 li 태그중 마지막 li 요소 선택 */

.fruits li:last-child {
  color: red;
}

11. NTH CHILD

A : nth-child( n ) : A가 형제 요소 중 n 번째 요소라면 선택
( n은 0부터 해석 ; Zero-base )

/* (1) 클래스명이 fruits인 요소의 하위 요소 li 태그중 짝수번째 li 요소들 선택 */

.fruits li:nth-child(2n) {
  color: red;
}


/* (2) 클래스명이 fruits인 요소의 하위 요소 li 태그중 3번째 이후의 li 요소들 선택 */

.fruits li:nth-child(n+3) {
  color: red;
}


/* (3) 클래스명이 fruits인 요소의 하위 요소 li 태그 중 
       2번째 요소가 <li></li> 가 아니라면 선택되지 않는다. */

.fruits li:nth-child(2) {
  color: red;
}

12. FIRST OF TYPE

A : first-of-type : A의 타입( 태그 이름 )과 동일한 타입인 형제 요소 중 A가 첫 번째 요소라면 선택 

/* 클래스명이 fruits인 요소의 하위 요소 중 1번째 li 요소 선택
   ( 즉, li 중에 1번째 요소 선택 ) */

.fruits li:first-of-type {
  color: red;
}


/* <li></li> 요소들 중에서 1번째 선택 후, 클래스명이 red인지 체크
   만약, 첫 번째 li 태그의 클래스명이 red가 아니라면 선택되지 않는다. */
       
.fruits .red:first-of-type {
  color: red;
}

13. LAST OF TYPE

A : last-of-type : A의 타입( 태그 이름 )과 동일한 타입인 형제 요소 중 A가 마지막 요소라면 선택 

/* (1) 클래스명이 fruits인 요소의 하위 요소 중 마지막 li 요소 선택
       ( 즉, li 중에 2번째 요소 선택 ) */

.fruits li:last-of-type  {
  color: red;
}


/* (2) <li></li> 요소들 중에서 마지막 요소 선택 후, 클래스명이 red인지 체크
       만약, 마지막 li 태그의 클래스명이 red가 아니라면 선택되지 않는다. */
       
.fruits .red:last-of-type  {
  color: red;
}

14. NTH OF TYPE

A : nth-of-type( n ) : A의 타입( 태그 이름 )과 동일한 타입인 형제 요소 중 A가 n 번째 요소라면 선택
( n은 0부터 해석 ; Zero-base )

/* (1) 클래스명이 fruits인 요소의 하위 요소 중 2번째 li 요소 선택
       ( 즉, li 중에 2번째 요소 선택 ) */

.fruits li:nth-of-type(2) {
  color: red;
}


/* (2) <li></li> 요소들 중에서 1번째 선택 후, 클래스명이 red인지 체크
       만약, 첫 번째 li 태그의 클래스명이 red가 아니라면 선택되지 않는다. */
       
.fruits .red:nth-of-type(1) {
  color: red;
}

15. 부정 선택자 ( Negation Selector )

A : not( B ) : B가 아닌 A 선택

/* 클래스명이 fruits인 요소의 하위 요소 중 클래스명이 orange가 아닌 요소 선택 */

.fruits li:not(.orange) {
  color: red;
}

가상 요소 선택자 ( Pseudo-Elements Selectors )

1. BEFORE

A :: before : A요소 내부의 앞에, 내용(content)을 삽입

/* 각 <li></li> 내부의 앞에 내용(content)으로 & 문자 삽입 */

ul li:before {
  content: "&";
}

/* 
<ul>
  <li>&1</li>
  <li>&2</li>
  <li>&3</li>
</ul>
*/

2. AFTER

A :: after : A요소 내부의 뒤에, 내용을 삽입

/* 각 <li></li> 내부의 뒤에 내용(content)으로 & 문자 삽입 */

ul li:after {
  content: "&";
}

/* 
<ul>
  <li>1&</li>
  <li>2&</li>
  <li>3&</li>
</ul>
*/

3. FIRST LETTER

A :: first-letter : A요소의 첫 번째 글자 선택

/* 클래스명이 lorem인 요소의 첫 글자 선택 */

.lorem::first-letter {
  color: red;
  font-size: 24px;
}

4. FIRST LINE

A :: first-line : A요소의 첫 번째 줄 선택
( 여기서 "첫 번째 줄" 은 가로 크기에 따라 개행된 줄 기준 )

/* 클래스명이 lorem인 요소의 첫 줄 선택 */

.lorem::first-line {
  color: red;
  font-size: 24px;
}

5. SELECTION

A : selection : A 요소에 해당하는 영역 선택

/* 클래스명이 lorem인 요소에 해당하는 영역 선택 */

.lorem::selection {
  background-color: blue;
  color: white;
}

속성 선택자 ( Attribute Selectors )

1. ATTR

[ attr ] : 속성 attr을 포함하는 요소 선택

/* disabled 속성을 포함한 요소 선택 */

[disabled] {
  opacity: 0.3;
}

2. ATTR=VALUE

[ attr=value ] : 속성 attr을 포함하고, 해당 속성값이 value인 요소 선택

/* type="password" 속성을 만족하는 요소 선택 */

[type="password"] {
  color: red;
}

3. ATTR^=VALUE

[ attr^=value ] : 속성 attr을 포함하고, 해당 속성값이 value로 시작하는 요소 선택

/* 클래스명이 "btn-"로 시작하는 요소 선택 */

[class^="btn-"] {
  color: green;
}

4. ATTR$=VALUE

[ attr$=value ] : 속성 attr을 포함하고, 해당 속성값이 value로 끝나는 요소 선택

/* 클래스명이 "done"으로 끝나는 요소 선택 */

[class$="done"] {
  color: blue;
}

5. ATTR*=VALUE

[ attr*=value ] : 속성 attr을 포함하고, 해당 속성값이 value를 적어도 하나 포함하는 요소 선택

/* href 속성값에 "example"을 적어도 하나 포함하는 요소 선택 */

a[href*="example"] {
  color: blue;
}

그룹화

CSS 코드가 동일한 여러 요소를 한 번에 쓸 수 있다. 각 요소는 콤마( , )로 구분한다.

p, div, .box {
  color: green;
}

상속 제어하기

1. initial

initial 키워드는 속성의 초깃값( 기본값 )을 요소에 적용한다. 이때, 기본값은 브라우저에서 지정한다.
모든 속성에 사용할 수 있고, all 속성에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정한다.

<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
p {
  color: red;
}

em {
  color: initial;
}

위의 예시에서 <p></p> 태그 영역에 속하는 요소의 텍스트 컬러는 red로 지정했지만,
<em></em> 은 initial 키워드로 color 속성을 기본값으로 재정의했기 때문에 해당 영역의 텍스트는 기본값인 검정색으로 출력된다.

2. inherit

inherit 키워드를 사용한 속성은 부모 요소로부터 해당 속성값을 받아 사용한다.
all 단축 속성을 포함한 모든 속성에 사용 가능하다.

 /* h2의 텍스트 색상은 green */
 h2 { color: green; }

 /* 부모 요소의 color를 사용하도록 sidebar 내의 h2를 홀로 남김 */
 #sidebar h2 { color: inherit; }

3. unset

unset 키워드를 적용한 속성은 부모로부터 상속할 값이 존재하면 상속값을 사용하고, 그렇지 않으면 초깃값( 기본값 )을 사용한다.
다시 말해, 부모로부터 상속할 값이 존재하면 inherit처럼 동작하고, 그렇지 않으면 initial처럼 동작한다는 의미이다.
all 단축 속성을 포함한 모든 속성에 사용 가능하다.

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

위의 예시를 살펴보면, .bar p 의 color 속성은 inherit 키워드 값으로 지정되었다.
여기서 p의 부모요소 .bar 에서 상속할 값 color : green ; 이 존재하기 때문에
이 예시에서는 inherit 처럼 동작하여 .bar p 의 텍스트 컬러가 green 색상으로 나타나는 것이다.

우선순위

  1. 선언된 곳
  2. 명시도 ( 적용 범위가 적을수록 명시도가 높은 것!! )
    !important > inline style > ID > Class / Attribute / Pseudo Class > Type (tag) > * > inherited
  3. 코드 위치
profile
박은지
이전 포스트

CSS

다음 포스트

CSS - 폰트 관련 속성

0개의 댓글