CSS 선택자(Selectors) 문법

기본 선택자

 

결합 선택자

요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다.

 

일치 선택자

E와 F를 동시에 만족하는 요소 선택

#EF{
  margin: 0 auto;
  width: 1080px;
}

 

자식 선택자

E의 자식 요소 F를 선택

#E>F{
  margin: 0 auto;
  width: 1080px;
}

 

자손 선택자

E의 자손(자식,손자, 등등 안에 있는 모든 태그들) 요소 F를 선택.

자식은 자손에 포함되어있다. 그러므로 자식 선택자를 E F로 써도 가능

#E F{
  margin: 0 auto;
  width: 1080px;
}

 

동위 선택자

동위 관계란 HTML 요소의 계층 구조에서 같은 부모 요소를 가지고 있는 요소들을 의미한다. 이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 부른다.

 

인접 형제 선택자

E의 다음 형제 요소 F 하나만 선택

#E+F{
  margin: 0 auto;
  width: 1080px;
}

 

일반 형제 선택자

E의 다음 형제 요소 F 모두 선택

#E~F{
  margin: 0 auto;
  width: 1080px;
}

 

그룹 선택자

여러 선택자를 한꺼번에 적용하고 싶을때, 선택자들을 쉼표(,)로 구분하여 연결하면 그룹으로 스타일이 적용된다.

h2 { color: navy; }

h2, h3 { text-align: center; }

h2, h3, p { background-color: lightgray; }

 

---

의사(가상) 선택자

보통 선택자는 HTML 요소(element)를 직접적으로 선택하여 스타일링한다. 하지만 의사(가상) 선택자는 HTML요소를 직접적으로 선택하지 않고, 해당 요소의 상태(state)에 따라 선택하여 꾸며주는 것을 의미한다고 본다.

 

의사(가상) 요소 

의사 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 줄 수 있다.

선택자	설명
::first-letter	콘텐츠의 첫글자를 선택한다.
::first-line	콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after	콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before	콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection	드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.

/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }

/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line   { color: red; }

/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
h1::before {
   content: " HTML!!! ";
   color: blue;
}

/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
h1::after {
   content: " CSS3!!!";
   color: red;
}

/* 드래그한 콘텐츠를 선택한다 */
::selection {
   color: red;
   background: yellow;
}

 

의사 클래스

의사 클래스(pseudo-class)란 html 요소의 특별한 상태(state)를 명시할 때 사용하는 선택자를 말한다. 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 스타일링을 한다고 보면 된다.

 

동적 의사(가상) 클래스

링크(anchor) 태그의 상태에 따라 각각의 스타일을 지정하는 전용 선택자이다.

선택자	설명
:link	셀렉터가 방문하지 않은 링크일 때
:visited	셀렉터가 방문한 링크일 때
:hover	셀렉터에 마우스가 올라와 있을 때
:active	셀렉터가 클릭된 상태일 때
:focus	셀렉터에 포커스가 들어와 있을 때

 

/* a 요소가 방문하지 않은 링크일 때 */
a:link { color: orange; }

/* a 요소가 방문한 링크일 때 */
a:visited { color: green; }

/* a 요소에 마우스가 올라와 있을 때 */
a:hover { font-weight: bold; }

/* a 요소가 클릭된 상태일 때 */
a:active { color: blue; }

 

상태 의사 클래스

입력(input) 태그의 상태에 따라 각각의 스타일을 지정하는 전용 선택자이다.

선택자	설명
:checked	셀렉터가 체크 상태일 때
:enabled	셀렉터가 사용 가능한 상태일 때
:disabled	셀렉터가 사용 불가능한 상태일 때

CSS

/* input 요소가 사용 가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:enabled + span {
   color: blue;
}

/* input 요소가 사용 불가능한 상태일 때,
    input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:disabled + span {
   color: gray;
   text-decoration: line-through;
}

/* input 요소가 체크 상태일 때,
    input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:checked + span {
   color: red;
}

 

구조 의사 클래스

구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 수학적인 값으로 선택할 수 있다.

 

FIRST CHILD

형제 요소 중 첫번째 요소와 선택한 타입이 일치하면 선택

span:first-child /* 첫번째 자식(span)과 선택자(span)가 일치하면 적용 */

p:first-child  /* 첫번째 자식(span)과 선택자(p)가 불일치하여 미적용 */

 

LAST CHILD

형제 요소 중 마지막 요소와 선택한 타입이 일치하면 선택

p:last-child  /* 마지막 자식(p)과 선택자(p)가 일치하면 적용 */

span:last-child /* 마지막 자식(p)과 선택자(span)가 불일치하여 미적용 */

 

NTH CHILD

형제 요소 중 n번째 요소와 선택한 타입이 일치하면 선택

타입:nth-child(n)

/* span:nth-child(1) === span:first-child */

 

레퍼런스

🎨 CSS 선택자(Selectors) 문법 총정리 모음