CSS Selector

CSS Selector

HTML 문서에서 특정 요소를 선택하여 스타일을 적용하는 데 사용

다양한 유형의 셀렉터를 통해 개별 요소부터 그룹화된 요소까지 세밀하게 스타일을 지정 가능

 

기본 셀렉터

// 요소(태그) 셀렉터 (Type Selector)
p {
  color: blue;
}

// 클래스 셀렉터
.highlight {
  background-color: yellow;
}

// 아이디 셀렉터
#header {
  font-size: 24px;
}

 

결합 셀렉터

// 자손 셀렉터
div p {
  color: green;
}

// 자식 셀렉터
div > p {
  color: red;
}

// 형제 결합 셀렉터
h1 + p {
  color: orange;
}

// 일반 형제 셀렉터
h1 ~ p {
  color: purple;
}

 

자손 셀렉터 : 선택자 A의 모든 자손 요소 중 선택자 B를 선택

자식 셀렉터 : 선택자 A의 직접 자식인 선택자 B를 선택

형제 결합 셀렉터 : 선택자 A 바로 뒤에 오는 형제 요소 선택자 B를 선택

일반 형제 셀렉터 : 선택자 A 이후에 나타나는 모든 형제 요소 선택자 B를 선택

 

그룹 셀렉터

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

 

속성 셀렉터

// 존재 여부 확인
a[target] {
  color: red;
}

// 특정 값 확인
a[target="_blank"] {
  color: blue;
}

// 부분 문자 확인
a[href*="example"] {
  text-decoration: underline;
}

 

가상 클래스

// 방문하지 않은 링크
a:link {
  color: green;
}

// 방문한 링크
a:visited {
  color: purple;
}

// 마우스를 올린경우
button:hover {
  background-color: yellow;
}

// 마우스가 포커스 잡혔을 때
button:focus {
  background-color: yellow;
}

// 클릭된 경우
button:active {
  background-color: yellow;
}

 

가상 요소

요소의 내용 앞이나 뒤에 콘텐츠를 삽입할 때 사용

p::before {
  content: "Note: ";
  font-weight: bold;
}

p::after {
  content: ";";
}

 

유니버셜 셀렉터

// 모든 요소
* {
  margin: 0;
  padding: 0;
}