-
css - selectorcss 2021. 11. 13. 14:27
css를 적용하지 않았을 때 상황
1. selector 종류
1) universial (*) - 모든 태그 선택
2. type selector - 태그 이름 작성
3. id selector (#)
만약에, <hi id="special">Hello</h1>
이 있다면, 이 역시 id="special" 이라서,
# special {
color: pink;
}
가 적용되서 분홍색이 될 것이다.
하지만,
li#special {
color: pink;
}
이렇게 적용시키면,
li 의 id=special 인 것만 pink색으로 바뀜
4. class selector(.)
그런데 여기서 보면, background : yellow 값을 줬는데도 반응이 없다.
현재 div가 텅 비어 있는 empty 상태라서 그러함
(div는 block level의 element)
그래서 이렇게 div 에 button을 넣어주면, 노랑색을 볼 수 있음
이렇게 말고, width랑 height를 넣어주면, 그 부분이 노랑색이 됨.
5. state selector
버튼에 마우스를 올리면 글자색이 바뀌도록 함.
(스크린캡쳐해서 마우스가 안 보여서 그렇지, 마우스 올린상태에서 스크린캡쳐한 것입니다)
6. 속성값에 따라 변함
a 태그 중 href 값이 있는 것만 색깔이 바뀌도록
만약 .com 으로 끝나는 애들만 적용
a[herf$=".com"] {
color: purple;
}
------- 실행한 html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Hello</title> </head> <body> <hi id="special">Hello</h1> <ol> <li id = "special">First</li> <li>Second</li> </ol> <button>Button 1</button> <button>Button 2</button> <div class = "red"></div> <div class = "blue"></div> <a href="naver.com">Naver</a> <a href="google.com">Google</a> <a>Empty</a> </body> </html>html, css 실행 사이트 : jsbin.com
정보 출처 : https://www.youtube.com/watch?v=gGebK7lWnCk&t=319s