[CSS] CSS 기초 - 선택자

CSS 선택자란?

: HTML 태그, ID, Class, 속성 등의 특성을 이용해 CSS 규칙을 적용할 요소를 선택하는 것을 말한다.

 

[기본선택자]

• 전체 선택자
  : 모든 요소를 대상으로 하는 선택자로 *(애스터리스크) 문자를 이용해 지정한다.

* {
 margin: 0; /* 모든 요소에 0 크기의 바깥 여백을 적용함. */
 padding: 0; /* 모든 요소에 0 크기의 안쪽 여백을 적용함. */
}

• Type 선택자
  : 특정 요소를 대상으로 지정하는 선택자로 HTML 태그명을 이용해 대상을 선택한다.

/* p태그를 가진 모든 요소를 지정한다. */
p {
 color: red;
 text-decoration: underline;
}

/* h2태그를 가진 모든 요소를 지정한다. */
h2 {
 font-size: 32px;
 margin: 1rem;
}

• Class 선택자
  : 특정 요소를 대상으로 지정하는 선택자로 HTML 요소에 명시한 Class를 이용해 대상을 선택한다. ('.' + '클래스명' 형식으로 지정한다.)

/* 'mainTitle'라는 class명을 가진 모든 요소를 지정한다. */
.mainTitle {
 font-size: 64px;
 font-weight: bold;
 margin: 18px;
}

• ID 선택자
  : 특정 요소를 대상으로 지정하는 선택자로 HTML 요소에 명시한 ID를 이용해 대상을 선택한다. ('#' + 'ID명' 형식으로 지정한다.)
  

/* 'username'라는 ID명을 가진 모든 요소를 지정한다. */
#username {
 background: yellow;
 font-weight: bold;
}

/* 'password'라는 ID명을 가진 모든 요소를 지정한다. */
#password {
 text-decoration: wavy underline red;
}

• 속성 선택자
  : 특정 요소를 대상으로 지정하는 선택자로 HTML 요소에 명시한 속성(attr)을 이용해 대상을 선택한다.

/* class 속성을 가진 모든 p태그 요소를 지정한다. */
p[class] {
  color: green;
  font-size: 12px;
}

/* class 속성에 "top" 값으로 시작하는 모든 p태그 요소를 지정한다. */
p[class^="top"] {
  color: red;
}

/* class 속성에 "name" 값으로 끝나는 모든 p태그 요소를 지정한다. */
p[class$="name"] {
  color: yellow;
}

/* href 속성에 "https://www.google.com" 값을 가진 모든 a태그 요소를 지정한다. */
a[href="https://www.google.com"] {
  font-weight: bold;
}

/* href 속성에 "www" 값을 포함하는 모든 a태그 요소를 지정한다. */
a[href*="www"] {
  background: royalblue;
}

/* class 속성에 "head" 값을 포함하는 모든 h1태그 요소를 지정한다. */
h1[class~=""] {
  color: blue;
}

[그룹선택자]

• 선택자 목록
  : 그룹 선택자(선택자 목록)은 쉼표(,)를 이용해 선택자들을 구분하여 나열해 다수의 요소를 지정한다.

/* p태그, class 속성을 가진 h1태그, ID명이 "head"인 요소를 모두 지정한다. */
p, h1[class], #head {
 color: red;
}

[결합자]

• 자손 결합자
  : 순서대로 오른쪽 요소가 왼쪽 요소의 자손으로, 공백을 기준으로 나열되어 가장 마지막에 명시된 자손 요소를 지정한다.

/* div안의 span이 가지고 있는 p요소를 지정한다. */
div span p {
 color: yellow;
}

• 자식 결합자
  : '>'를 기준으로 왼쪽 요소의 바로 하위(자식)인 요소를 지정한다.

/* div태그 하위에 존재하는 모든 p태그 요소를 지정한다.*/
div > p {
 color: green;
}

• 일반 형제 결합자
  : 같은 부모를 공유하면서 '~'를 기준으로 왼쪽 요소가 가장 첫 번째로 나타나는 위치 이후의 모든 오른쪽 요소를 지정한다. (가장 첫 번째 왼쪽 태그 이전에 나온 오른쪽 태그는 선택되지 않는다.)

/* h1태그 이후에 나오는 모든 li태그 요소들을 지정한다. */
h1 ~ li {
 text-decoration: underline;
}

 

• 인접 형제 결합자
  : 같은 부모를 공유하면서 '+'를 기준으로 왼쪽 요소 바로 뒤(이후)에 위치하는 오른쪽 요소를 지정한다.

/* h1태그 바로 뒤에 위치한 p태그 요소를 선택한다. */
h1 + p {
 color: red;
}