CSS 하위 Selector

Q : 바로 밑에 있지 않더라도 모두 선택하려면?

Q : 바로 직접적인 자식을 선택 

Q : 바로 인접하여 나오는 형제를 선택 

Q : 같은 부모를 가진 태그를 선택 

Q : 여러개의 태그를 동시에 선택 

 

 

* 바로 밑에 있지 않더라도 모두 선택

 

div p {
    color: red;
}

 

 

* 바로 직접적인 자식을 선택 

 

div > p {
    color: blue;
}

 

 

* 바로 인접하여 뒤에 나오는 형제를 선택 

 

h1 + p {
    margin-top: 20px;
}

 

 

* 같은 부모를 가진 모든 형제를 선택 (h1을 부모로 가진 모든 p)

 

h1 ~ p {
    color: green;
}

 

 

* 여러개를 동시에 선택 

 

h1, h2, h3 {
    font-family: Arial, sans-serif;
}