Attribute selector (속성 선택자)
- 특정 속성 값을 갖는 요소를 선택할 때 사용한다.
- 정규표현식의 일부 기호인 *, ^, $, | 등을 사용하여 다양한 표현이 가능하다.
- 태그종류[속성표현]의 기본 형태를 가진다.
예시들을 통해 사용 방법을 알아보자
a[href] {
color: green;
}
href 속성을 갖는 모든 a태그를 선택한다.
a[target="_blank"] {
color: red;
}
target 속성 값이 _blank인 모든 a태그를 선택한다.
div[class*="test"] {
color: red;
}class에 test라는 글자를 포함하는 모든 div태그를 선택한다. ex) class="mytest", class="tests" ...
a[href^="https://"] {
color: red;
}href 속성 값이 https://로 시작하는 모든 a태그를 선택한다.
a[href$=".html"] {
color: red;
}href 속성 값이 .html로 끝나는 모든 a태그를 선택한다.
Cobinator (복합 선택자)
자신의 1단계 상위 요소를 부모 요소, 1단계 하위 요소를 자식 요소라고하며 자신보다 n단계 하위에 속하는 요소들은 후손 요소라고 한다. 또한 자신과 같은 단계에 속하는 요소들을 형제 요소라고 한다.
1. 후손 선택자
div p {
color: red;
}공백으로 나타내며 div의 모든 후손 요소 중 p와 일치하는 요소를 선택한다. 태그가 아닌 클래스 등이 와도 된다.
2. 자식 선택자
div > p {
color: red;
}>로 나타내며 div의 자식 요소 중 p와 일치하는 요소를 선택한다. 태그가 아닌 클래스 등이 와도 된다.
3. 형제 선택자
p ~ ul {
color: red;
}~로 나타내며 p의 형제 요소 중 p 뒤에 위치하는 ul 태그를 모두 선택한다.
4. 인접 형제 선택자
p + ul {
color: red;
}+로 나타내며 p의 형제 요소 중 p 바로 뒤에 위치하는 ul 태그를 모두 선택한다.
형제 선택자와 인접 형제 선택자의 차이를 더 예시를 통해 더 쉽게 이해해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 ~ p {
background-color: yellow;
}
h3 + p {
color: red;
}
</style>
</head>
<body>
<div>
<h3>인사</h3>
<p>안녕하세요, 개발자 이선호입니다.</p>
<p>만나서 반갑습니다.</p>
</div>
<div>
<h3>취미</h4>
<p>컴퓨터 게임</p>
<p>기타 연주</p>
<p>운동: 헬스, 배드민턴, 축구</p>
</div>
</body>
</html>
h3 ~ p를 통해 모든 h3 뒤에 오는 p 태그들의 배경색을 노란색으로 만들어주었고, h3 + p를 통해 h3와 인접한 p태그만 빨간색으로 표시되는 것을 볼 수 있다.
5. 일치 선택자
.foo.bar {
color: blue;
}
공백 없이 두 요소가 붙어있는 복합선택자는 논리적으로 AND를 의미하며 두 클래스 모두 가지고 있는 요소를 선택한다. 이는 .foo .bar이라는 foo 클래스 안에 있는 bar 클래스를 선택하는 문법과 헷갈리지 않도록 주의해야한다.
가상 클래스 선택자
요소의 특정 상태에 따라 스타일을 정의할 때 사용되며 :로 나타낸다.
selector:pseudo-class {
property: value;
}- :link - 요소가 방문하지 않은 링크일 때
- :visited - 요소가 방문한 링크일 때
- :hover - 요소에 마우스가 올라와 있을 때
- :active - 요소가 클릭된 상태일 때
- :focus - 요소에 포커스가 들어와 있을 때
- :checked - 요소가 체크 상태일 때
- :enabled - 요소가 사용 가능한 상태일 때
- :disabled - 요소가 사용 불가능한 상태일 때
- :first-child - 해당 요소의 자식 중 첫 번째 자식
- :last-child - 해당 요소의 자식 중 마지막 자식
- :nth-child(n) - 해당 요소의 자식 중 앞에서 n번째 자식
- :nth-last-child(n) - 해당 요소의 자식 중 뒤에서 n번째 자식
- :first-of-type - 해당 요소의 자식 중 특정 타입의 첫번째 자식
- :last-of-type - 해당 요소의 자식 중 특정 타입의 마지막 자식
- :nth-of-type(n) - 해당 요소의 자식 중 특정 타입의 앞에서 n번째 자식
- :nth-last-of-type(n) - 해당 요소의 자식 중 특정 타입의 뒤에서 n번째 자식
- :not(selector) - 셀렉터에 해당되지 않는 모든 요소
가상 요소 선택자
요소의 특정 부분에 스타일을 적용하기 위해 사용되며, ::로 나타낸다.
selector::pseudo-element {
property: value;
}- ::first-letter - 콘텐츠의 첫 글자
- ::first-line - 콘텐츠의 첫 줄
- ::after - 콘텐츠의 뒤. content 속성과 함께 쓰임
- ::before - 콘텐츠의 앞. content 속성과 함께 쓰음
- ::selection - 드래그한 콘텐츠 (일부 브라우저 동작 X)
※ content 속성은 실제 html 파일에 존재하지 않는 요소를 css에서 생성하여 추가할 수 있는 속성이다.
'Web-Frontend > CSS' 카테고리의 다른 글
| [CSS] position 속성의 display 속성값 변경 (0) | 2024.01.13 |
|---|---|
| [CSS] Sass와 SCSS (0) | 2023.11.07 |