하위 선택자 / 자식 선택자
2022. 9. 22. 11:04ㆍjsp/css
이번의 목표
01. 하위 선택자에 대해 알아보자.
02. 자식 선택자에 대해 알아보자.
css 작성할 때에 때때로 하위의 객체들에만 스타일을 적용하기 위해 코드를 쓸때가 있습니다.
예를 들자면
div label {
color:red;
}
의 형식으로 적곤 하는데 이렇게 하면 해당 div 안에 있는 label은 모두 빨간 글씨가 됩니다.
이렇게 쓰고 싶다면 쓰지만, 혹시나 손주 객체는 그렇게 하기 싫고 자식 객체에만 스타일을 적용 시키고 싶을때에도 방법이 있습니다.
id를 사용하는 것도 방법이겠지만, 그렇게 하면 자식 객체에 모두 id를 넣어줘야하니까 차라리 > 키워드를 사용해봅시다.
> 키워드는 자식 객체 의 선택자입니다. 공백은 하위 선택자 입니다.
div > label{
color:red;
}
를 쓰면 div의 손주 객체에는 적용이 안되고 자식 객체에만 적용이 됩니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#div > label {
color:hotpink;
}
</style>
</head>
<body>
<div id="div">
<label>
div의 자식
</label>
<div>
<label>
div의 하위
</label>
</div>
</div>
</body>
</html>
02. 실행 화면
See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen.
① #div의 자식 객체인 label에는 스타일이 적용 되었지만 하위 객체인 label에는 스타일이 적용되지 않는 것을 확인할 수 있습니다.
'jsp > css' 카테고리의 다른 글
| CSS - 객체의 컬러를 지정하는 방법 (0) | 2022.10.19 |
|---|---|
| css - !important, box-shadow 에 대해 알아보자 (0) | 2022.10.19 |
| 11주차 - jsp&css (23) caption-side, empty-cells (0) | 2022.09.14 |
| 11주차 - jsp&css (22) border-spacing (0) | 2022.09.14 |
| 11주차 - jsp&css (21) border-collapse (0) | 2022.09.14 |