본문 바로가기
프로그래밍/CSS

CSS 고급 선택자

by 리나그(ReenAG) 2023. 7. 28.
728x90
반응형

 CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자.

 

해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다.

1. 하위 선택자

 제일 많이 이용할 선택자들 중 하나이다. 어떤 선택자의 하위에 존재하는 모든 요소에 해당 스타일을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>descendant</title>
	<style>
		section p {
			color: blue;
		}
	</style>
</head>
<body>
	<p>
		outside section
	</p>
	<section>
		<p>
			아직 온라인 예약 신청이... (p inside section)
		</p>
		<div>
			<p>
				가족실... (p inside div inside section)
			</p>
		</div>
	</section>
</body>
</html>

 

2. 자식 선택자

 부모요소 바로 아래에 있는 자식 요소 에게만 스타일을 적용하는 태그이다. 위의 것과는 다르게 손자 이하부터는 적용하지 않는다는 의미이다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>childe</title>
	<style>
		section > p {
			color: blue;
		}
	</style>
</head>
<body>
	<p>
		outside section
	</p>
	<section>
		<p>
			아직 온라인 예약 신청이... (p inside section)
		</p>
		<div>
			<p>
				가족실... (p inside div inside section)
			</p>
		</div>
	</section>
</body>
</html>

 여기서부터는 생소할 수 있다.

3. 인접 형제 선택자

 같은 요소 안에 들어있는 가장 첫번째 해당 요소를 찾아서 스타일을 적용

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>childe</title>
	<style>
		h1 + p {
			color: white;
			background-color: #222;
		}
	</style>
</head>
<body>
	<h1>예약 방법 & 이용 요금</h1>
	<p>아직 온라인 예약....</p> <!-- h1요소의 형제 요소중 첫번째 형제인 p에만 적용 -->
	<p>가족실....</p>
	<p>도미토리....</p>
</body>
</html>

4. 형제 선택자

 같이 붙어있는 모든 형제 선택자에 해당 스타일을 적용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>childe</title>
	<style>
		h1 ~ p {
			color: white;
			background-color: #222;
		}
	</style>
</head>
<body>
	<h1>예약 방법 & 이용 요금</h1>
	<p>아직 온라인 예약....</p>
	<p>가족실....</p>
	<p>도미토리....</p>
</body>
</html>

이것 말고도 더 많은 선택자들이 있는데, 다음 포스팅에서는 "속성 선택자"를 포스팅해보도록 해야겠다.

728x90
반응형

'프로그래밍 > CSS' 카테고리의 다른 글

[반응형] CSS 간단한 가변 요소 크기 단위 정리  (1) 2023.12.28
CSS margin padding 해도 안 사라지는 공백 (inline-block)  (3) 2023.12.21
CSS 고급 선택자 2 - 속성 선택자  (0) 2023.08.13
CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정  (0) 2023.05.31

관련글

티스토리툴바