HTML+CSS 기초 강의 - 25. CSS 선택자 기초 2 - 클래스와 가상클래스의 조합
a, a:link, a:visited, a:hover
링크 태그(<a></a>)는 중요하기 때문에 따로 분리해서 CSS선택자를 설명합니다.
선택자 뒤에 콜론(:)으로 구분해 추가되는 단어를 가상 클래스라고 하며, 선택된 요소의 특정 상태를 가리키는데 사용됩니다.
예를 들어 a:hover 클래스 정의는 하이퍼링크 a 태그 위에 마우스 커서가 위치했을 때의 상태를 나타내는 것으로
hover는 이 상태를 가리키는 가상클래스 이름입니다.
태그/클래스:가상클래스(상태)
이런식으로 표기합니다.
링크 태그는 다른 태그들과 달리 전용으로 사용하는 하위 상태를 여러개 가지고 있습니다.
a 와 a:link는 CSS 속성 정의할 때 같은 것으로 간주합니다.
a:hover 는 링크 태그(<a></a>) 위로 마우스 커서를 위치했을 때의 상태를 나타냅니다.
a{color:#a00} 과 a:link{color:#a00} 은 같은 결과를 나타냅니다.
a:visited 는 방문한 링크(한번 이상 클릭)를 나타냅니다.
:hover 는 링크 태그 뿐만 아니라 일반 태그에도 사용할 수 있는 상태입니다. 뒤에서 따로 설명합니다.
클래스/태그 + 클래스/태그
+ 기호로 클래스/태그 를 2개 이상 나열해 정의합니다. 인접한 두 태그의 뒤쪽 태그를 선택할 때 사용합니다.
예를 들어
ul p{color:#a00}
으로 정의하며
ul 태그 바로 다음에(하위가 아니라) 오는 p태그에 빨강색을 적용합니다.
인접 태그 적용이기 때문에 ul 과 p 태그 사이에 다른 태그가 오면 해당 CSS는 적용되지 않습니다.
일종의 조건부 적용이라고 이해하면 됩니다.
클래스/태그 > 클래스/태그
알 클래스/태그 바로 밑의 1뎁스 하위 클래스/태그에 속성을 적용합니다. 1뎁스 외에 2뎁스 이하 클래스/태그에는 적용되지 않습니다.
예를 들어
div > p{color:#a00}
으로 정의 했다면
<div> <p>문단1</p> <div> <p>문단2</p> </div> <p>문단3</p></div>
섹션에서 문단1과 문단3에는 컬러 속성(color:#a00)이 적용되지만 문단2에는 컬러 속성이 적용되지 않습니다.
클래스/태그 ~ 클래스/태그
앞 클래스/태그 선택자 뒤에 오는 모든 뒷 선택자(클래스/태그)에 속성을 적용합니다.
+ 조합은 바로 뒤에 인접해 오는 첫번째 클래스/태그에만 적용되지만, ~ 태그는 바로 인접하지 않아도 뒤에 오는 모든 태그/클래스에 영향을 미칩니다.
+ 와 마찬가지로 동위(형제) 태그에만 적용되며, 하위 태그에는 영향을 주지 않습니다.
예를 들어
div ~ p{font-color:#a00}
로 CSS를 정의했다면
<div></div><ul></ul><p> 문단1 <p>문단2</p></p><p>문단3</p><p>문단4</p>
섹션에서는 문단1, 문단3, 문단4에만 컬러 속성이 적용됩니다.