html, css 선택자 정리 class 조건 정리

1. 클래스 / 아이디

/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}

/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}

<p class="important">Paragraph class</p>
<p id="favorite">Paragraph id</p>

2. 자식, 직속 자식

자식 : 다른 태그로 둘러 쌓인 모든 태그에 적용

/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}

<div class="div1">
  <i>Inside 1</i>
  <p>Blah blah <i>Inside 2</i></p>
  <i>Inside 3</i>
</div>

직속 자식 : <p> 태그 안쪽 <i> 태그는 적용 안되고 다이렉트로 쓰인 태그만 적용

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

<div class="div1">
  <i>Inside 1</i>    <-- o
  <p>Blah blah <i>Inside 2</i></p>  <-- x
  <i>Inside 3</i>    <-- o
</div>

3. 복수 선택

여러개의 태그를 한번에 적용 가능 

/* 'A' 클래스를 가지고 있는 태그 모두와 'D' 클래스를 가지고 있는 태그 모두 선택 */
.A, .D {
  color: orange;
}

<p class="A">Outside 1</p>  --> O
<p class="B">Outside 2</p>
<div>
  <p class="A">Inside 1</p>  --> O
  <p class="B">Inside 2</p>
  <p class="C">Inside 3</p>
  <p class="D">Inside 4</p>  --> O
  <p class="E">Inside 5</p>
</div>

4. 여러 조건을 전부 충족하는 설정

/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}

/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

<p class="outside one">Outside 1</p>  --> O
<p class="outside two">Outside 2</p>
<div>
  <p class="inside one">Inside 1</p>
  <p class="inside two">Inside 2</p>  --> O
</div>

5. Pseudo-class (가상 클래스) p:조건

p:nth-child(n) : p 태그 중 3번째

p:first-child : p 태그 중 첫 번째

p:last-child : p 태그 중 마지막

p:not(:first-child) : p 태그 중 첫번째를 제외한 모든 p태그

p:not(:last-child) : p 태그 중 마지막을 제외한 모든 p태그

 

CSS
/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}

/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}

/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}

/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}

/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}

html
<div class="div1">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p>
</div>

6. 마우스 오버 (hover)

/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}

<h1>Hello World!</h1>