CSS) Selector, Selector 우선순위

참고 : 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;

}