CSS 선택자 1편
선택자
- 어떤 요소에 스타일을 적용할 것인지에 대한 정보
- 종류
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
기본 선택자
-
전체 선택자 : 모든 요소 선택
-* { color: blue; } -
태그 선택자(유형 선택자) : 주어진 이름을 가진 요소 선택
- 문서 내 모든 p 태그 요소의 글자 색을 파란색으로 지정
-p { color: blue; } -
클래스 선택자(.) : 주어진 class 속성값을 가진 요소 선택
- 문서 내 class가 "text"인 모든 요소의 글자 색을 파란색으로 지정
-.text { color: blue; } -
아이디 선택자(#) : 주어진 id 속성값을 가진 요소 선택
- 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정
-#topic { color: blue; }
그룹 선택자
-
그룹 선택자
- 다양한 유형의 요소를 한꺼번에 선택할 때 사용
-h1, p, div { color: blue; } -
선택자가 겹치는 경우
- 나중에 작성된 스타일이 적용 -
선택자가 다르지만 요소가 겹치는 경우
- 선택자 우선순위에 의해 스타일이 적용
- 아이디 선택자 → 클래스 선택자 → 태그 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>선택자</title>
<style>
.text{ color:magenta; }
#first{ color:green; }
h2, p{ color:blueviolet; }
</style>
</head>
<body>
<h1 class="text">제목 표시 1</h1>
<p id="first">문단 표시 1</p>
<p class="text">문단 표시 2</p>
<p>문단 표시 3</p>
<h2>제목 표시 2</h2>
</body>
</html>
ISTJ의 재미없는 velog