Web/CSS
CSS) Selector, Selector 우선순위
surhommejk
2018. 5. 3. 15:03
참고 : https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
참고 링크에 모든 생성자가 정리되어 있으며 아래 생성자들은 자주 쓰이는 생성자에 대한 정리
ID selector, class Selector
/* id selector : #id */
#firstid {
color: #f442d7;
border: black;
border-width: 5px;
border-style: solid;
}
/* class selector : .classname */
.firstclass{
color: rgb(0, 255, 0);
}
Star Selector
/* Star */
/* 페이지 내 모든 태그에 적용 */
* {
}
Descendant Selector
/* Descendant Selector */
/* 특정 태그의 특정 하위 태그에 적용 */
/* EX) li 내부의 a 태그에 적용 */
/* li a{} : li의 자손 중 모든 a vs li > a{} : li의 직계자손 a */
li a {
}
Adjacent Selector
/* Adjacent Selector */
/* 특정 태그의 바로 뒤에 따라오는 태그에 적용 */
/* EX) h1에 바로 붙어서 따라나오는 ul에 적용 */
/* h1 + ul {} : h1뒤에 붙어 나오는 특정ul vs h1 ~ ul {} : h1뒤에 오는 모든ul */
h1 + ul {
}
Attribute Selector
/* Attribute Selector */
/* 동일 속성 태그들에 적용 */
/* EX 1) http://www.google.com 로 링크가 걸린 태그에만 적용 */
a[href="http://www.google.com"] {
}
/* EX 2) input 태그 중 type이 text인 태그에만 적용 */
/* 더 자세히 간다면=> input[type=radio]:checked {} : input type이 radio이면서 체크가 된 것 */
input[type="text"] {
}
nth-of-type Selector
/* nth of type(?) */
/* 특정 태그 중 ? 순서에 해당하는 태그에 적용 */
/* EX) li 태그 중 3번째 li에는 모두 적용 */
li:nth-of-type(3) {
}
X:hover, X:checked, X:visited, X:link
/* div에 마우스를 올리면 div에 적용 */
div:hover {
}
/* input 태그의 type 중 radio이면서 check가 된 것에 적용 */
input[type=radio]:checked {
}
/* a:link : <a>의 link 부분에 적용 */
/* a:visited : <a> 중 방문했던 링크에 적용 */
a:link { color: red; }
a:visited { color: purple; }
Selector 우선순위
/* 아래로 갈 수록 우선순위가 높다 */
/* Selector의 Scope의 범위가 좁을 수록 우선순위가 높다 */
body {
color: red;
}
ul {
color: green;
}
li {
color: blue;
}
.highlight {
color: orange;
}
/* id의 우선순위가 가장 높다 */
#special {
color: pink;
}