👇 현 페이지 하단에 CSS 코드가 정리되어 있습니다.
👇 현 페이지 하단에 CSS 코드가 정리되어 있습니다.
🕹️ 선택자 연습 사이트
CSS 코드 정리
기본 & 그룹 선택자
/* 모든 요소 선택 */
* {
font-weight: bold;
color: darkorange;
}
/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
color: plum;
}
/* 태그 선택자 */
p {
color: olivedrab;
}
/* class 선택자 */
/* 태그보다 우선순위 높음 */
/* 페이지상의 여러 요소가 같은 class를 가질 수 있음 */
.blue {
color: lightblue;
}
/* 다른 선택자에 이어붙일 수 있음(태그, 클래스 등...) */
/* 선택자는 구체적일수록 우선순위 높음 */
p.blue {
color: slateblue;
}
.blue.dark {
color: mediumblue;
}
p.blue.dark {
color: darkblue;
}
/* id 선택자 */
/* class보다 우선순위 높음 */
/* id는 페이지상에서 요소마다 고유해야 함 */
#red {
color: tomato;
}
/* 그룹 선택자 */
span, .dark, #red {
text-decoration: underline;
}
결합자와 가상 클래스
/* 자손 결합자 */
.outer li {
color: olivedrab;
}
/* 자식(1촌 자손) 결합자 */
.outer > li {
color: dodgerblue;
}
.outer > li li {
text-decoration: underline;
}
/* 뒤따르는 모든 동생들 결합자 */
.starter ~ li {
font-style: italic;
}
/* 뒤따르는 바로 다음 동생 결합자 */
.starter + li {
font-weight: bold;
}
/* 첫 번째, 마지막 요소 가상 클래스 */
ol li:first-child,
ol li:last-child {
color: yellowgreen;
}
/* ~가 아닌 요소 가상 클래스 */
.outer > li:not(:last-child) {
text-decoration: line-through;
}
ul:not(.outer) li {
font-weight: bold;
}
/* ~번째 요소 가상 클래스 */
/* #, #n, #n+#, odd, even 등 시도해보기 */
ol li:nth-child(3) {
font-weight: bold;
color: deeppink;
}
/* 마우스오버 가상 클래스 */
li:hover {
font-weight: bold;
color: blue;
}
"1촌 선택자인데 그 밑으로도 적용돼요."
위의 CSS 문서에서 .outer li 부분(color: olivedrab;)을 없애 보면
.outer > li에 지정한 dodgerblue 색이 그 아래 <li>에도 적용되는 것을 볼 수 있습니다.
이는 폰트나 텍스트 관련 등 CSS의 일부 속성들이 자식들에게 자동 상속되기 때문입니다.
즉 1촌 자식 선택자라도 이에 적용한 속성이 상속되는 속성이라면
이를 덮어쓰는 다른 선택자와 속성을 지정하지 않는 한 그 아래의 자식들도 해당 속성을 물려받게 됩니다.
상속에 대해서는 유료파트에서 자세히 배우게 됩니다.