element 선택방법
지금까지는 3가지 방법으로 element 선택
- tag 이름 입력 ex)
div {} - id 이름 입력 ex)
#id {} - class 이름 이렵ㄱ ex )
.class {}
Pseudo selector는 조금 더 세부적으로 element를 선택하게 해준다.
Pseudo selector
- html 코드에 id나 class정보를 적지 않고도 css만으로 element 선택이 가능하다.
- 원하는 tag 이름에
':'를 붙히고 옵션을 주면 된다.
<!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 속성 변경
CSS Combinator
ptag 안의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>
> Combinator
- div의 바로 밑의 자식인 span에만 스타일을 주고 싶으면
div > 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을 가리키고 싶은 경우 앞에서
div>span으로 가리킬수 있다. - p태그를 이용하고 싶은 경우
+selector 사용 - div의 자식 중에서 p와 span은 형제의 계층구조를 가짐
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아닌 다른 태그가 오게 되면 원하는동작 x
- 즉
+의미는 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>
정리
- 같은 tag이지만 tag내에서 특정 규칙을 적용하고 싶은 경우
:을 사용 - html의 계층구조에서 부모 자식 관계를 이용하여 특정 element에 접근이 가능
- 특정 부모의 바로 밑 자식을 가리키고 싶은 경우
>selector를 사용 - 특정 부모에서 같은 자식들 중에서 특정 형제를 가리키고 싶은 경우
+selector 사용(꼭 바로 뒤에 오는 형제에 적용) ~를 사용하면 형제와 형제 관계이지만 꼭 바로 뒤에 올 필요가 없음.
