Categories: CSS

CSS 선택자 종류와 설명

css

CSS 선택자는 웹 개발에서 중요한 개념 중 하나입니다.
웹 페이지를 디자인하고 스타일링 하는데 사용되는 CSS의 핵심 부분 중 하나로,
선택자를 올바르게 이해하는 것이 중요합니다.

CSS 선택자의 기본 개념

CSS 선택자는 웹 페이지의 요소를 선택하여 스타일을 적용하는데 사용됩니다. 웹 페이지에서 어떤 부분을 선택하고 어떻게 스타일을 적용할지를 정의하는데 선택자가 필수적입니다. 간단한 선택자부터 그룹화 및 속성 선택자까지 다양한 유형이 있습니다.

CSS 전체 선택자

전체 선택자는 모든 요소를 선택합니다. 기본적으로 모든 스타일을 적용하고자 할 때 사용됩니다.

* {
  color: aqua;
}

CSS

CSS 요소 선택자

요소 선택자는 HTML 요소를 선택합니다. 예를 들어, p는 모든 단락을 선택합니다.

p {
  color: pink;
}

CSS

CSS ID 선택자

ID 선택자는 특정 ID를 가진 요소를 선택합니다. #box은 ID가 ‘box’인 요소를 선택합니다.

#box {
  background-color: blue;
}

CSS

CSS Class 선택자

Class 선택자는 특정 클래스를 가진 요소를 선택합니다. .tag는 클래스가 ‘tag’인 모든 요소를 선택합니다.

.tag {
  background-color: yellow;
}

CSS

CSS 선택자의 조합과 그룹화

선택자를 조합하거나 그룹화하면 스타일을 더 효율적으로 적용할 수 있습니다.
예를 들어, h1, h2는 h1과 h2 요소에 동일한 스타일을 적용합니다.

h1,h2 {
  color: skyblue;
}

CSS

CSS 속성 선택자

속성 선택자는 특정 HTML 속성을 가진 요소를 선택합니다. input[type=”password”]는 ‘type’ 속성이 ‘password’인 요소를 선택합니다.

input[type="password"] {
  color: green;
}

CSS

CSS 자손 선택자

자손 선택자는 띄어쓰기를 사용하여 부모 요소와 그 자손 요소를 나타내는 CSS 선택자입니다. 부모 요소와 자손 요소 사이에 공백을 두어 나타내며, 이를 통해 특정한 계층 구조의 요소를 스타일링 할 수 있습니다.

footer a {
  color: pink;
}

CSS

CSS 자식 선택자

자식 선택자는 부모 요소의 직계 자식 요소를 선택하기 위한 선택자입니다.
이 선택자는 > 기호를 사용하여 부모와 직계 자식 요소를 나타냅니다.

footer > a {
  color: pink;
}

CSS

CSS 인접 선택자

인접 형제 선택자는 같은 부모를 가지고 있고 같은 부모에서 형제 관계에 있는 다음 요소를 선택하기 위한 선택자입니다. 이 선택자는 + 기호를 사용하여 표시됩니다.

/* input 다음에 오는 button 을 선택 */
input + button {
  background-color: pink;
}

CSS

CSS 가상 클래스

가상 클래스는 요소의 특정 상태를 선택합니다. :hover는 마우스를 요소 위에 올렸을 때 상태를 나타냅니다.

a:hover {
  text-decoration: underline;
}

CSS

CSS 가상 요소

가상 요소 선택자는 문서의 일부가 아닌 특정한 부분이나 상태를 선택하기 위한 CSS 선택자 중 하나입니다. 가상 요소는 존재하지 않는 요소를 말하며, 주로 특정한 스타일을 적용하기 위해 사용됩니다. 가상 요소 선택자는 두 개의 콜론(::)을 사용하여 정의되며, 일반적으로 다음과 같은 형식을 가집니다.

span::before {
  content: "가상 요소";
}

CSS

결론

CSS 선택자는 웹 개발에서 스타일을 적용하는 핵심 도구입니다.
선택자를 효과적으로 활용하면 웹 페이지의 디자인과 스타일링을 더욱 유연하게 조작할 수 있습니다. 선택자의 다양한 유형을 이해하고 적재적소에 활용하는 것이 좋습니다.
이를 통해 더 멋진 웹 페이지를 구현할 수 있습니다.

suover