선택자
- 전체선택자 : * { color:red; }
- 태그선택자 : p { color:red; } or div { color:red; }
- 클래스선택자 : .class { color:red; } or div.class { color:red; }
- ID선택자 : #id { color:red; } or div#id { color:red; }
복합선택자
<!DOCTYPE html>
<html>
<head>
<style>
ul li{ /*ul 밑에있는 li에 해당*/
color:red;
}
#lecture>li{
border:1px solid red;
}
ul,ol{
background-color: powderblue;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>
가상클래스 선택자 ( pseudo )
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭 했을 때
- :focus - Focus가 머물러 있을 때
※ a tag 옵션
- href="주소" : 클릭 시, 이동할 링크
- target="_self" : 현재 페이지에서 오픈(default)
- target="_blank" : 새탭에서 오픈
- target="_parent" : 부모 페이지에서 오픈
- target="_top" : 최상위 페이지에서 오픈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a{
font-size: 20px;
}
a:link{
color:black;
}
a:visited{
color:red;
}
a:hover{
color:yellow;
}
a:active{
color:green;
}
a:focus{
color:white;
}
input:focus{
background-color: black;
color:white;
}
</style>
</head>
<body>
<a href="https://naver.com">방문함</a>
<a href="https://daum.net" target="_blank">방문안함</a>
<input type="text">
</body>
</html>
선택자 적용 순서
- [ * < tag < class < id < html style < !important ]
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red;font-size: 40px !important; }
ol li{color:black;font-size: 20px;}
#idsel{color:blue;}
.classsel{color:green;}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id="idsel" class="classsel" style="font-size: 10px; color:powderblue">CSS</li>
<li id="idsel" class="classsel" >CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>
