CSS 선택자 level 1, 2 part2 - by. UXKM

Publishing
CSS
CSS 초급
CSS 선택자 level 1, 2 part2

요약 설명
선택자는 스타일링하고 싶은 HTML 요소나 부여한 id, class를 지정하는 위치입니다. 선언부에 여러 개의 속성과 속성값이 있을 때는 세미콜론(;)으로 구분하고, 각 선언은 속성과 속성값을 콜론(:)으로 구분합니다.
CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있으며, 선택자 우선순위는 [!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자] 순으로 적용됩니다.

요약 설명
CSS 선택자 level 1, 2 part-2에서는

조합 선택자(Combinators)

속성 선택자(Attribute Selector)

의사(가상) 클래스(Pseudo-classes)에 대해 다룹니다.

조합 선택자(Combinators)

하위 조합(Descendant combinator) or 하위 선택자

CSS Level 1 선택자로, 특정 요소의 하위에 있는 요소를 선택합니다. 하위 조합 콤비네이터를 사용하는 선택기를 하위 선택자라고 합니다.

									ul li {
										/* style 작성 */
									}

자식 연결자(Child combinator)

CSS Level 2 선택자로, 특정 요소의 자식 요소를 선택합니다. 첫 번째 요소와 일치하는 요소의 직접적인 하위 요소인 두 번째 선택자와 일치하는 요소만 선택되며, 한 단계 아래에 있는 요소만 선택합니다.

									ul > li {
										/* style 작성 */
									}

인접한 형제 선택자(Adjacent sibling combinator)

CSS Level 2 선택자로, 같은 부모를 가진 형제 요소 중에서 특정 요소 바로 다음에 오는 요소를 선택할 때 사용합니다.
선택자A 바로 뒤에 오는 선택자B 요소를 선택하며, A와 B는 같은 부모를 가져야 하고 A 바로 다음에 B가 와야 합니다. A와 B 사이에 다른 요소가 있으면 선택되지 않습니다.

Element + Element(선택자A + 선택자B)

									p + ul {
										/* style 작성 */
									}

body
p
ul
p + ul {color:#ff0000;}
h1
ul

[인접한 형제 선택자]

속성 선택자(Attribute Selector)

CSS Level 2 선택자로, 주어진 속성의 존재 또는 값에 따라 요소를 일치시킵니다.

								a[attribute] { … }
								[attribute='value'] { … }
								[attribute~='bar'] { … }
								[attribute|='en'] { … }

[attribute]

지정된 속성을 가진 요소를 선택합니다. (예: h1[title] - [title] 속성을 가진 <h1> 요소를 선택)

[attribute="value"]

속성의 값이 value인 요소를 선택하며, 속성값이 정확히 일치해야 합니다. (예: h1[title="abc"] - [title] 속성의 값이 abc인 <h1> 요소를 선택)

[attribute~="value"]

속성 값이 공백으로 구분된 여러 단어 중에서 지정된 단어를 포함하는 요소를 선택합니다.
(예: h1[title~="abc"] - [title] 속성이 "abc xyz"처럼 공백으로 구분된 단어 중 "abc"를 포함하면 선택됩니다. "abcxyz"처럼 공백 없이 붙어있으면 선택되지 않습니다)

[attribute|="value"]

속성 값이 정확히 일치하거나 하이픈(-) 뒤에 다른 값이 오는 형태로 시작하는 요소를 선택합니다.
(예: h1[title|="abc"] - [title] 속성이 "abc"이거나 "abc-xyz"처럼 "abc-"로 시작하면 선택됩니다. "abc xyz"처럼 공백이 있으면 선택되지 않습니다)

속성 선택자(Attribute Selector) 예제

의사(가상) 클래스(Pseudo-classes)

링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

선택자 뒤에 가상 이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상(추상) 클래스라고 합니다.
CSS Level 1 선택자로는 E:link, E:visited가 있고, CSS Level 1, 2 선택자로는 E:active, E:hover, E:focus가 있습니다.
링크의 기본 스타일 효과를 주는 속성과 링크에 활성화를 더해주는 속성으로 구분하며, :hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.
:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.

									a:link { … }
									a:visited { … }
									a:active { … }
									a:hover { … }
									a:focus { … }

:link

아직 방문하지 않은 링크를 나타내며, 링크의 기본 상태입니다. 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.

:visited

방문한 링크를 나타내며, 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태입니다.

:active

클릭된 상태를 나타내며, 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.

:hover

마우스가 올라와 있을 때를 나타내며, 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.

:focus

포커스가 들어와 있을 때를 나타내며, 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.

링크 셀렉터, 동적 셀렉터 예제

구조적 의사(가상)클래스(Structural pseudo-class)

요약 설명
CSS Level 2 선택자로, 구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있습니다.

선택자에 해당하는 요소 유형(타입)에 상관없이 모든 요소 중 첫 번째 자식인 요소를 선택하며, 부모의 첫 번째 자식 요소를 나타냅니다. 이 가상 클래스는 CSS2.1에서 먼저 정의되었고 IE7+ 모든 브라우저들이 지원하고 있습니다.

									p:first-child {
										/* style 작성 */
									}

언어 의사(가상) 클래스(The language pseudo-class)

CSS Level 2 선택자로, 문서의 언어를 기반으로 요소를 선택합니다. 특정 요소를 언어 설정에 따라 다르게 표현할 때 사용하며, 최상위 <html> 요소에 lang="언어코드"가 있으면 최상위에 있는 것이 먼저 적용됩니다.

									p:lang(언어코드) {
										/* style 작성 */
									}