반응형
혼합선택자, 우선순위
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>혼합 선택자</title>
<style> /*인라인-아이디-클래스-태그*/
div{
font-size: 12px;
color: skyblue;
}
.show{
font-size: 20px;
font-family: 궁서체;
}
#disp{
font-size: 40px;
}
</style>
</head>
<body>
<div> 연습입니다. 12px, skyblue </div>
<br/><br/>
<div class="show">
연습입니다. (12px, 20px), skyblue, 맑은 고딕
</div><br/><br/>
<div id="disp">
연습니다. (12px, 40px), skyblue
</div><br/><br/>
<div class="show" id="disp">
id 속성이 우선순위 가장 높음 (12px, 20px, 40px), skyblue
</div><br/><br/>
<div style="font-size: 9px;" id="disp" class="show">
style 속성이 우선순위 가장 높음 (12px, 20px, 40px, 9px), skyblue <br/>
상속 받고, 오버라이딩 한 것임.
</div>
</body>
</html>
동위 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동위(모든 동생, 바로아래동생) 선택자 </title>
<style>
.title ~ div{ /*모든동생*/
font-size: 20px;
color: blue;
}
.title + div{ /*바로아래동생*/
font-size: 9px;
color: yellow;
}
</style>
</head>
<body>
<div id="content">
<div>안녕하세요.</div>
<div class="title" style="color: red;font-size: 20px;">Hi</div>
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
<div>FOUR</div>
<div>FIVE</div>
</div>
</body>
</html>~ : 특정 요소 이후에 위치한 모든 동생 요소를 선택
+: 특정 요소 바로 다음 형제요소를 선택
속성 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자 </title>
<style>
span[id ^='complex']{
color: blue;
}
span[id $='text1']{
font-size: 35px;
}
span[id *='text']{
background-color: yellow;
}
input[type]{
color: orange;
}
input[type='text']{
font-size: 20px;
}
</style>
</head>
<body>
<span id="simpletext1">simpletext1</span>
<span id="simpletext2">simpletext2</span>
<span id="completext1">complextext1</span>
<span id="complextext2">complextext2</span>
<span id="complex">complex</span>
<br/><br/>
<form>
<label>이름</label>
<input type="text"/><br/>
<label>아이디</label>
<input type="text"/><br/>
<label>비밀번호</label>
<input type="password"/><br/>
<label>전화번호</label>
<input type="tel"/><br/>
</form>
<br/>
<img width="200" height="100" src="" alt="이미지 중입니다."/>
<br/>
</body>
</html>1. [attribute]: 특정 속성이 있는 요소를 선택. 예를 들어, [disabled]는 disabled 속성이 있는 요소를 선택한다.
2. [attribute=value]: 특정 속성 값이 정확히 일치하는 요소를 선택. 예를 들어, [type=text]는 type 속성 값이 "text"인 요소를 선택한다.
3. [attribute^=value]: 특정 속성 값으로 시작하는 요소를 선택. 예를 들어, [href^="https://"]는 href 속성 값이 "https://"로 시작하는 요소를 선택한다.
4. [attribute$=value]: 특정 속성 값으로 끝나는 요소를 선택. 예를 들어, [src$=".jpg"]는 src 속성 값이 ".jpg"로 끝나는 요소를 선택한다.
5. [attribute*=value]: 특정 속성 값이 포함된 요소를 선택. 예를 들어, [class*="red"]는 class 속성 값에 "red"가 포함된 요소를 선택한다.
반응형
'HTML | CSS' 카테고리의 다른 글
| [day4-1] 가상클래스(필터) 선택자 nth-child(), first-letter, first-line, selection | focus, disabled, enabled (0) | 2023.06.02 |
|---|---|
| 선긋기(link,hover,visited) | margin, padding | 방명록 만들기 (0) | 2023.06.02 |
| 입력태그<input> | <form> 회원가입폼 만들기 | 시맨틱을 이용해 layout 만들기 (0) | 2023.05.31 |
| 표 만들기 | iFrame (0) | 2023.05.31 |
| 글꼴 | 문단과 목록 | 외부 사이트,내부 사이트 페이지 이동 | 이미지 및 영상,사운드 불러오기 (0) | 2023.05.30 |
