div {}
#id {}
.class {}
Pseudo selector는 조금 더 세부적으로 element를 선택하게 해준다.
':'
를 붙히고 옵션을 주면 된다. <!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vh;
height: 100vh;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
div:first-child {
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vh;
height: 100vh;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
div:first-child{
background-color: blue;
}
span:nth-child(2n){
background-color: tomato;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<span>hellow</span>
<span>hellow</span>
<span>hellow</span>
<span>hellow</span><br>
<span>hellow2</span>
<span>hellow2</span>
<span>hellow2</span>
<span>hellow2</span>
</body>
</html>
span:nth-chid(1) : span의 첫번째 element 속성 변경
span:nth-chid(odd) : span의 홀수번째 element 속성 변경
span:nth-chid(even) : span의 짝수번째 element 속성 변경
span:nth-chid(3n) : span의 3의 배수 번째 element 속성 변경
p
tag 안의 span
의 속성 바꾸고 싶은 경우p span {}
div p span {}
도 가능 <!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vh;
height: 100vh;
}
span {
color : green;
}
p span {
color : blue;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
만나서 반갑습니다. html, css 관련 예제 코드입니다.
<span> inside p hello! </span>
</p>
</div>
</body>
</html>
div span
으로 옵션을 설정하게 되면 div span
의 hello와div p span
의 inside p hello! 스타일이 변경되는 문제 발생<head>
<style>
body {
width: 100vh;
height: 100vh;
}
span {
color : green;
}
div span {
color : blue;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
만나서 반갑습니다. html, css 관련 예제 코드입니다.
<span> inside p hello! </span>
</p>
</div>
>
Combinatordiv > span
으로 작성<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vh;
height: 100vh;
}
span {
color : green;
}
div > span {
color : blue;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
만나서 반갑습니다. html, css 관련 예제 코드입니다.
<span> inside p hello! </span>
</p>
</div>
</body>
</html>
<body>
<div>
<p>
만나서 반갑습니다. html, css 관련 예제 코드입니다.
<span> inside p hello! </span>
</p>
<span>hello</span>
</div>
</body>
div>span
으로 가리킬수 있다.+
selector 사용p + span
을 하게 되면 + 기호를 통해 p다음의 span형제를 찾는다.+
Combinator<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vh;
height: 100vh;
}
span {
color : green;
}
div + span {
color : blue;
}
</style>
</head>
<body>
<div>
<p>
만나서 반갑습니다. html, css 관련 예제 코드입니다.
<span> inside p hello! </span>
</p>
<span>hello</span>
</div>
</body>
</html>
+
의미는 p다음에 오는 형제 태그가 span인 경우에만 동작~
Combinator<head>
<style>
body {
width: 100vh;
height: 100vh;
}
span {
color : green;
}
p ~ span {
color : blue;
}
</style>
</head>
<body>
<div>
<p>
만나서 반갑습니다. html, css 관련 예제 코드입니다.
<span> inside p hello! </span>
</p>
<address>address element! </address>
<span>hello</span>
</div>
</body>
</html>
:
을 사용>
selector를 사용+
selector 사용(꼭 바로 뒤에 오는 형제에 적용)~
를 사용하면 형제와 형제 관계이지만 꼭 바로 뒤에 올 필요가 없음.