CSS - 선택자(selectors) - 2

Nested Elements

HTML 태그의 nested 한 자식 태그에서도 CSS 스타일링이 적용될 수 있다.

<nav>
  <ul class="nav-list">
    <li>Register</li>
    <li>Schedule</li>
    <li>Sponsors</li>
    <li>About</li>
    <li>Contacts</li>
  </ul>
 </nav>

nav 태그 내의 Unorder List 태그의 클래스 속성은 “nav-list”이다. 이때 CSS 문서에 nav-list에 대한 스타일링을 정의해준다.

.nav-list {

	color: magenta;

}

이 상태로 코드를 돌리면 ul 태그의 자식 태그인 li 태그들의 요소들이 “nav-list”에 정의된 CSS 스타일을 받게 된다.

Important

앞서 정리한 CSS 선택자의 우선순위는 tag < class < id 순이다. 하지만 id보다 더 강력한 CSS 문법이 있다. !important를 활용해주면 그 어떤 CSS 스타일도 override 해줄 수 있다.
문법은 다음과 같다.

p {
	color: blue !important
}

.main p {

	color: red;
}

!important를 p 태그 내의 CSS 코드에 넣어주게 되면 HTML 문서 내의 모든 p 태그의 스타일이 override 되고 모든 글씨의 색깔은 파란색으로 변하게 된다.

너무 강력한 CSS 문법이기 때문에 잘 사용하지도 않은 분더러 권고하지도 않는다. CSS 문서를 작성할 때 important를 사용할 상황이 오게 되면 코드를 다시 설계하는 게 더 낫다.

Multiple Selectors

CSS 코드를 조금 더 간결하게 만들어주기 위해 다수의 CSS 선택자들을 하나로 묶어둘 수 있다. 다음과 같이 h1 태그와 .menu 클래스의 스타일이 있다. 똑같이 font-family를 Georgia로 바꿔주는 CSS이다.

h1 {

	font-family: Georgia;
}

.menu {

	font-family: Georgia;
}

똑같은 스타일을 두 번 작성하는 대신 이렇게 줄여줄 수 있다.

h1,
.menu {

	font-family: Georgia;
}