형제 선택자 & 속성 선택자

삼전·2023년 5월 23일

CSS

목록 보기

7/14

인접선택자

선택자A+선택자B -> 선택자A의 바로 다음에 있는 선택자B를 선택한다.

선택자A ~ 선택자B -> 선택자A의 다음에 있는 모든 선택자B를 선택한다.

속성 선택자

html태그의 속성과 속성값으로 선택한다.

태그[속성=속성값]: 속성과 속성값이 같으면 선택

태그[속성$=특정값]: 속성값이 특정값으로 끝나면 선택

태그[속성^=특정값]: 속성값이 특정값으로 시작하는 경우

태그[속성*=특정값]: 속성값이 특정값으로 포함하고 있으면 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
	h1+h2{
		background-color:yellow;
	}
	
	h1~h2{
	 	color:hotpink;
	}
	h2:hover{
		background-color:pink;
	}
	img{width:200px; height:200px;}
	h2[title=형제선택자]{background:orange;}
	img[src$=png]{border:3px solid green;}
	img[title$=스]{border:3px dotted red;}
	img[src^='../img/S']{border:double 5px blue; }
	img[src*=p]{border:solid 5px hotpink;}
	input[value*=yaimma]{color: red;}
</style>
<title>인접(형제)선택자</title>
</head>
<body>
  <h1>형제 선택자111111</h1>
  <h2>형제 선택자222222</h2>
  <h2>형제 선택자333333</h2>
  <h2>형제 선택자444444</h2>
  <h2>형제 선택자555555</h2>
  <h2>형제 선택자6666666</h2>
  <h2>형제 선택자7777777</h2>
  <h3>~~~~~~~~~~~~~~</h3>

  <h1>형제 선택자111111</h1>
  <h2 title="형제선택자">형제 선택자222222</h2>
  <h2>형제 선택자333333</h2>
  <h2>형제 선택자444444</h2>
  <h2>형제 선택자555555</h2>
  <h2>형제 선택자6666666</h2>
  <h2>형제 선택자7777777</h2>
  <h3>~~~~~~~~~~~~~~</h3>

  <img src="../img/jeju.png" title="제주배경" />
  <img src="../img/SeoulLogo.jpg" title="서울로고"/>
  <img src="../img/swisda.jpg" title="스위스"/>
  <input type="text" value="yaimma" />
</body>
</html>