[CSS] 선택자(Selectors)

(1) 기본 선택자(Basic selectors)

 

전체 선택자(Universal selector): 모든 요소를 선택합니다.

구문: *

* {
  color: green;
}

 

유형 선택자(Type selector): 문서 내에서 주어진 유형의 모든 요소를 선택합니다.

구문: a

a {
  color: red;
}

클래스 선택자(Class selector): 주어진 class 특성을 가진 모든 요소를 선택합니다.

구문: .classname

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

 

ID 선택자(ID selector): id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.

구문: #idname

/* id="demo" 요소 선택 */
#demo {
  border: red 2px solid;
}

 

특성 선택자(Attribute selector): 주어진 특성을 가진 모든 요소를 선택합니다.

구문: [attr] [attr=value][attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

[attr]attr 특성을 가진 요소를 선택합니다.

[attr=value]attr 특성값이 정확히 value인 요소를 선택합니다.

[attr^=value]attr 특성의 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.

[attr$=value]attr 특성의 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.

[attr*=value]attr 특성값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다

[attr operator value i]괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다.

[attr operator value s] 괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

 

 

 

 

(2) 그룹 선택자(Grouping selectors)

선택자 목록(Selector list): ,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.
구문: A, B

span, div {
  border: red 2px solid;
}

 

 

 

(3) 결합자(Combinators)

<부모>
	<자식>
  	<자식> //자식끼리는 형제
    		<자손> //자식의 자식

자손 결합자(Descendant combinator): (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.
구문: A B

예제: div span은 <div> 요소 안에 위치하는 모든 자손 <span> 요소와 일치합니다.

div span {
  /* property declarations */
}

 

자식 결합자(Child combinator): > 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
구문: A > B
예제: ul > li은 <ul> 요소 모든 바로 아래 자식 <li>와 일치합니다.

ul > li {
  background-color: DodgerBlue;
}

 

일반 형제 결합자(General sibling combinator): ~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문: A ~ B
예제: div ~ span은 <p> 요소를 뒤따르는 모든 아래 형제 <span> 요소와 일치합니다.

div ~ span {
  color: red;
}

인접 형제 결합자(Adjacent sibling combinator): + 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문: A + B
예제: img + p는 <img> 바로 뒤의 형제 <p> 요소와 일치합니다.

img + p {
  font-weight: bold;
}

열 결합자(Column combinator): || 결합자는 같은 열에 속하는 노드를 선택합니다.
구문: A || B
예제: col || td는 <col>의 범위에 속하는 모든 <td> 요소와 일치합니다.

col || td {
  background: gray;
}

 

의사 클래스(Pseudo-classes)

선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 

구문:

selector:pseudo-class {

      property: value;

}

 

예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

의사 요소(Pseudo elements)

::는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

구문:

selector::pseudo-element {

       property: value;

}

 

예제: p::first-line은 모든 <p> 요소의 첫 번째 줄과 일치합니다.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

 

 

참고 developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

선택자 연습 게임 flukeout.github.io/