[CSS] CSS 선택자

 

CSS 선택자

 

CSS 선택자는 스타일을 적용할 HTML 요소를 지정하거나 선택하기 위한 규칙이다. 선택자를 사용하여 원하는 요소를 대상으로 하여 특정 스타일을 적용할 수 있다.

 

CSS에는 다양한 유형의 선택자가 있으며 크게 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자로 나뉜다. 각각 특정 목적에 따라 요소를 선택하는 데 사용되며, 자주 사용하는 선택자를 정리해보고자 한다.

 

---

 

기본 선택자

 

• 전체 선택자
• 태그 선택자
• 클래스 선택자
• ID 선택자

 

---

 

전체 선택자(Universal Selector)

 

'*'(Asterisk)은 모든 요소를 선택하는 전체 선택자이다. 복합 선택자와 함께 사용하여 범위 내 모든 요소를 선택하는 개념으로 사용하곤 한다.

 

* {
  color: red;
}

 

• 전체 선택자는 주로 모든 요소의 margin, padding을 제거하는 등 스타일 초기화에 사용된다.
• 전체 요소에 일관된 box-sizing이나 기타 기본 스타일을 적용하고 싶을 때 사용한다.
• 전체 선택자를 사용하여 스타일 지정시 상속을 통해 명시되지 않은 요소에도 적영될 수 있다.

 

---

 

태그 선택자(Type Selector)

 

태그 이름으로 해당 태그명을 가진 모든 요소를 선택하여 스타일 적용이 가능하다.

 

<div>Hello, World!</div>

div {
  background-color: red;
}

 

• 특정 태그를 가진 모든 요소에 일관된 스타일을 적용하고 싶을 때 유용하다.
• 태그 선택자는 의도하지 않은 스타일이 될 수 있으므로, 보다 구체적인 선택자(class, id) 사용을 권장한다.

 

---

 

클래스 선택자(Class Selector)

 

HTML class 속성의 값으로 요소를 선택하여 해당 클래스 속성을 가진 모든 요소에 스타일 적용이 가능하다.

 

<button class="button primary">Submit</button>
<button class="button warning">Delete</button>

.button {
  border: none;
  cursor: pointer;
}
.primary {
  background-color: blue;
  color: white;
}
.warning {
  background-color: red;
  color: white;
}

 

• 클래스 선택자는 .으로 시작하고 다음으로 클래스 명을 작성한다.
• 재사용이 가능하여 특정 스타일을 다양한 요소에 적용할 때 유용하다.
• 하나의 요소에 여러 스타일을 적용할 때 유용하다.
• 클래스 이름은 대소문자를 구분하므로 정확하게 작성해야 한다.

 

---

 

ID 선택자(ID Selector)

 

HTML id 속성의 값으로 요소를 선택하여 해당 id 값을 가진 단 하나의 요소에 스타일이 적용된다.

 

<div id="greet">Hello, World!</div>

#greet {
  background-color: red;
}

 

• ID 선택자는 #으로 시작하고 다음으로 id 속성 값을 작성한다.
• id 값은 고유하므로 한 번만 사용할 수 있다. 즉, 한 번만 적용될 스타일이다.
• 페이지 내에서 요소에 유일한 스타일을 적용할 때 유용하다.

 

---

 

복합 선택자

 

• 일치 선택자
• 하위(후손) 선택자
• 자식 선택자
• 인접 형제 선택자
• 일반 형제 선택자

 

---

 

일치 선택자(Basic Combinator)

 

여러 선택자들을 동시에 만족하는 요소를 선택한다.

 

<p class="greet">Hello, world!</p>

p.greet {
  color: red;
}

 

• 별도의 기호를 붙이지 않고, 기본 선택자를 연달아서 작성한다.
• 태그 선택자의 경우 다른 선택자보다 먼저 작성해야 의도치 않은 결과를 방지할 수 있다.
  • ex. p.greet (O), .greetp (X)

 

---

 

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

 

특정 요소의 하위에 있는 모든 요소를 선택한다.

 

<div>
  <p>HTML</p>
  <p>CSS</p>
  <div>
    <p>JavaScript</p>
  </div>
</div>

/* div 하위에 있는 모든 p태그 선택 - HTML, CSS, JavaScript */
div p {
  color: red;
}

 

• 공백을 사용하여 표현한다.
• 특정 섹션 내 모든 텍스트 요소에 동일한 스타일을 적용하는 등 넓은 범위 스타일을 적용할 때 유용하다.
• 여러 하위 요소에 동일한 스타일을 적용할 때, 개별적으로 스타일을 적용하는 것보다 코드를 간결하게 유지할 수 있다.

 

---

 

자식 선택자(Child Combinator)

 

특정 요소의 직접적인 자식만 선택한다.

 

<div>
  <p>HTML</p>
  <p>CSS</p>
  <div>
    <p>JavaScript</p>
  </div>
</div>

/* div의 직접적인 자식 p태그만 선택 - HTML, CSS (JavaScript는 영향X) */
div > p {
  color: red;
}

 

• > 기호를 사용하여 표현한다.
• 특정 부모 요소 바로 아래에 있는 자식 요소에만 스타일을 적용하고 싶을 때 유용하다.
• 직접적인 자식에만 영향을 미치므로, 손자, 증손 등 다른 후손 요소에는 영향을 미치지 않는다.

 

---

 

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

 

특정 요소의 바로 뒤에 있는 형제 요소를 선택한다.

 

<ul>
  <li class="html">HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

/* 첫 번째 li 요소를 제외한 나머지 li 요소에 스타일 적용 - CSS, JavaScript */
li + li {
  color: blue;
}

/_ .html의 바로 다음 형제 요소인 li만 스타일 적용 - CSS _/
.html + li {
color: red;
}

 

• 특정 요소 바로 뒤에 이어지는 요소 사이의 스타일을 적용할 때 사용한다.
• 리스트 요소 사이의 특별한 구분자를 추가하거나, 두 섹션 사이의 마진을 제어할 때 유용하다.

 

---

 

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

 

같은 부모를 공유하는 형제 요소들 중, 한 요소의 다음에 위치한 모든 형제 요소들을 선택한다.

 

<ul>
  <li class="html">HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

/* 첫 번째 li 요소를 제외한 나머지 li 요소에 스타일 적용 - CSS, JavaScript */
li ~ li {
  color: blue;
}

/_ .html의 다음 형제 요소로 모든 li태그에 스타일 적용 - CSS, JavaScript _/
.html ~ li {
color: red;
}

 

• 특정 요소 이후의 모든 형제 요소에 스타일을 적용할 때 유용하다.
• 첫 번째 항목에만 스타일을 다르게 적용하고, 나머지 항목들에는 동일한 스타일을 적용하고자 할 때 유용하다.

 

---

 

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

 

가상 클래스 선택자는 : 으로 시작하며, CSS에서 요소의 특정 상태나 위치에 따라서 스타일을 적용하기 위해서 사용한다.

 

• :hover
• :active
• :focus
• :first-child & :last-child
• :nth-child(n)
• :not()
• :visited, :disabled, enabled, checked, ...

 

---

 

:hover

 

선택자에 마우스가 올라가 있는 동안 선택되며, 선택된 요소에 해당 CSS 내용이 적용된다.

 

a: hover {
  color: red;
}

 

• 링크나 버튼 등의 대화형 요소에 시각적 피드백을 제공하기 위해서 사용한다.
• 클릭 가능한 요소라는 것을 사용자에게 시각적으로 전달이 가능하다.

 

---

 

:active

 

선택자를 클릭하는 순간 선택되며, 선택된 요소에 해당 CSS 내용이 적용된다.

 

a: active {
  color: red;
}

 

• 요소가 활성화된 상태를 나타나기 위해서 사용한다.
• 마우스가 버튼을 누르고 있거나, 키보드 [Enter], [Space] 키로 요소를 활성화할 때 스타일을 적용한다.

 

---

 

:focus

 

선택자 요소가 포커스(ex. input 박스에 입력 중)되면 선택되며, 선택된 요소에 해당 CSS 내용이 적용된다.

 

input: focus {
  background-color: orange;
}

 

• 특정 요소가 입력 포커스를 받았을 때 스타일을 적용하기 위해서 사용한다.
• 키보드, 스크린 리더로 사용자가 접근할 때 중요하다.

 

focus 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당된다. focus될 수 없는 요소는 tabindex 속성을 통해 focus 될 수 있는 요소로 만들 수 있다. [tab] 키를 사용하여 focus 할 수 있는 순서를 지정할 수 있으며, -1 값이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다.

 

---

 

:first-child & :last-child

 

자식 요소 중 첫 번째 또는 마지막 요소를 선택한다.

 

<div class="front">
  <p>HTML</p>
  <p>CSS</p>
  <div>
    <p>JavaScript</p>
  </div>
</div>

/* .front의 자식 중 첫 번째 요소가 p인 요소 */
.front p:first-child {
  color: red; /* HTML 빨간색 적용 */
}

/_ .front의 자식 중 마지막 요소가 div인 요소 _/
.front div:last-child {
color: blue; /_ JavaScript 파란색 적용(상속) _/
}

/_ .front의 첫 번째 요소는 div가 아니므로 선택되지 않음 _/
.front div:first-child {
}

 

---

 

:nth-child(n)

 

선택자가 (n) 번째 자식 요소를 선택한다.

 

<div class="front">
  <p>HTML</p>
  <p>CSS</p>
  <div>
    <p>JavaScript</p>
  </div>
</div>

/* .front 후손 중 2 번째 요소가 *(모든 요소)인 요소 선택 */
.front *:nth-child(2) {
}

/_ 짝수 번째 요소 선택 _/
.front:nth-child(2n) {
}

/_ 홀수 번째 요소 선택 _/
.front:nth-child(2n + 1) {
}

/_ 1, 4, 7, ... 번째 요소 선택 _/
.front:nth-child(3n + 1) {
}

/_ x번째 요소부터 선택 _/
.front:nth-child(n + x) {
}

 

• 부모 요소의 자식 요소 중 특정 순서나 패턴에 해당하는 요소를 선택하는데 사용한다.
• n의 경우 0부터 시작한다.

 

---

 

:not() (부정 선택자, Negation)

 

지정된 선택자가 아닌 요소를 선택한다.

 

<div class="front">
  <p>HTML</p>
  <p>CSS</p>
  <div>
    <p>JavaScript</p>
  </div>
</div>

/* .front 후손 중 p 태그가 아닌 요소 선택 */
.front *:not(p) {
}

/_ .front 후손 중 첫 번째 자식 요소가 아닌 모든 요소 선택 _/
.front:not(:first-child) {
}

 

• 특정 조건을 만족하지 않는 요소에만 스타일을 적용하기 위해서 사용한다.
• 괄호 내의 선택자를 제외한다.

 

---

 

기타

 

• :visited : 방문한 링크를 선택한다.
• :disabled : 비활성화된 폼 요소를 선택한다.
• :enabled : 활성화된 폼 요소를 선택한다.
• :checked : 체크박스, 라디오 버튼 등에서 선택된 상태면 선택한다.

 

---

 

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

 

가상 요소 선택자는 ::으로 시작하며, CSS에서 특정 부분 또는 요소의 내용을 대상으로 스타일을 적용하기 위해서 사용한다. 가상 요소는 실제로 DOM에 추가되는게 아닌 CSS를 통해서 생성 및 스타일링 하는 것이다. 화면에만 표시되는 내용이기 때문에 JavaScript로 접근할 수 없다.

 

---

 

::before

 

선택자 요소의 내부 앞에 내용을 삽입한다. content 속성을 필수로 보유하고 있어야 하며, inline 특성을 띄고 있기 때문에 가로값과 세로값을 가지려면 block으로 전환해야 한다.

 

<div class="front">CONTENT</div>

.front::berfore {
  content: '⭐️';
}

/_ 결과 : ⭐️ CONTENT (front 클래스를 갖는 태그 모든 요소 앞에 ⭐️ 추가) _/

 

• 아이콘이나 추가 텍스트를 요소 앞에 삽입하는데 사용한다.

 

---

 

::after

 

선택자 요소의 내부 뒤에 내용을 삽입한다. content 속성을 필수로 보유하고 있어야 하며, inline 특성을 띄고 있기 때문에 가로값과 세로값을 가지려면 block으로 전환해야 한다.

 

<div class="front">CONTENT</div>

.front::after {
  content: '🌕';
}

 

---

 

기타

 

• ::first-line : 요소의 첫 번째 줄에만 스타일을 적용한다.
• ::first-letter : 요소의 첫 글자에만 스타일을 적용한다.
• ::selection : 사용자가 텍스트를 드래그하여 선택했을 때 스타일을 적용한다.

 

---

 

속성 선택자

 

속성 선택자는 [] 내에 속성 이름과 속성 값(선택적)이 포함되어 구성된다.

 

• CSS에서 요소의 특정 속성과 속성의 값에 따라 스타일을 적용하는데 사용된다.

 

/* type 속성을 가진 모든 요소 선택 */
[type] {}

• 특정 속성을 가진 요소를 선택하는 경우 유용하다.
• 요소가 특정 속성을 가지고 있을 때 스타일을 적용한다.

 

/* input 요소 중 type 속성 값이 'text'인 요소 선택 */
input[type='text'] {}

• 특정 속성과 값이 일치하는 요소를 선택하는 경우 유용하다.
• 요소의 속성 값이 정확하게 일치할 때 스타일을 적용한다.

 

아래 내용은 잘 사용하지 않지만 참고로 알아보자.

/* href 속성 값이 "https"로 시작하는 요소 선택 */
[href^='https'] {}

• 특정 값으로 시작하는 속성을 가진 요소를 선택하는 경우 유용하다.

 

/* href 속성 값이 ".jpg"로 끝나는 요소 선택 */
[href$='.jpg'] {}

• 특정 값으로 끝나는 속성을 가진 요소를 선택하는 경우 유용하다.

 

/* class 속성 값에 "button" 문자열이 포함된 요소 선택 */
[class*='button'] {}

• 특정 값이 포함된 속성을 가진 요소를 선택하는 경우 유용하다.

 

/* lang 속성 값이 "en" 또는 "en-"로 시작하는 요소 선택 */
[lang|='en'] {}

• 특정 값으로 나뉘어진 목록 중 하나와 일치하는 속성을 가진 요소를 선택하는 경우 유용하다.
• 속성 값이 공백 또는 하이픈(-)으로 나뉘어진 목록 중, 특정 값과 일치하거나 특정 값으로 시작할 때 스타일이 적용된다.