<body>
<h1>결합자와 가상 클래스</h1>
<ul class="outer">
<li>육류</li>
<li>채소</li>
<li>유제품</li>
<li>과일
<ul>
<li>사과</li>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ul>
</li>
</ul>
<ol>
<li>한놈</li>
<li>두시기</li>
<li class="starter">석삼</li>
<li>너구리</li>
<li>다섯놈</li>
<li>육개장</li>
<li>칠푼이</li>
<li>팔보채</li>
<li>구공탄</li>
</ol>
</body>/*1 자손 결합자 */
.outer li {
color: olivedrab;
}
/*2 자식(1촌 자손) 결합자 */
.outer > li {
color: dodgerblue;
}
.outer > li li {
text-decoration: underline;
}
/*3 뒤따르는 모든 동생들 결합자 */
.starter ~ li {
font-style: italic;
}
/*4 뒤따르는 바로 다음 동생 결합자 */
.starter + li {
font-weight: bold;
}
/*5 첫 번째, 마지막 요소 가상 클래스 */
ol li:first-child,
ol li:last-child {
color: yellowgreen;
}
/*6 ~가 아닌 요소 가상 클래스
ex) 일촌 자식의 아들 딸들 중, 마지막이 아닌 것*/
.outer > li:not(:last-child) {
text-decoration: line-through;
}
ex) /* ul중에 outer 클래스가 아닌 자손들 */
ul:not(.outer) li {
font-weight: bold;
}
/*7 ~번째 요소 가상 클래스 */
/*#, #n, #n+#, odd, even 등 시도해보기 */
ol li:nth-child(3) {
font-weight: bold;
color: deeppink;
}
/* 마우스오버 가상 클래스 */
li:hover {
font-weight: bold;
color: blue;
}-
자손결합자 ( 스페이스 )는 모든 자손을 선택하는 결합자이다.
-
일촌 자식 결합자 ( > ) 는 자기 아들 딸, 딱 1촌 자식만을 선택하는 결합자이다. **하지만, 속성이 오로지 1촌자식만 적용된다면 그 아래의 자실들도 해당 속성을 물려받게 된다.
-
뒤따르는 모든 동생들 결합자 ( ~ )는 군대의 내 밑으로 다 모여 !!
-
뒤따르는 바로 다음 동생 결합자 ( + )는 내 오른팔.
-
첫번째, 마지막 요소 가상 클래스는 :first-child, :last-child 사용.
-
~가 아닌 요소 가상 클래스는[ex)일촌 자식들의 아들 딸 중 마지막이 아닌 것 or ul중에 outer 클래스가 아닌 자손들] :not을 사용.
-
~번째 요소 가상 클래스는 :nth-child([ex: 3, 2n(두번째 것마다), 2n+1, odd(홀수), even(짝수)])을 사용
-
마우스오버 가상 클래스는 :hover를 사용.
문과를 정말로 존중해