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

2024-07-30

요약 설명
CSS 선택자 level 1, 2 part-2 에서는
- 조합 선택자(Combinators)
- 속성 선택자(Attribute Selector)
- 의사(가상) 클래스(Pseudo-classes)
에 대한 내용을 다루고 있습니다.

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

2.2.4. 조합 선택자(Combinators)

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

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

									ul li {
										/* style 작성 */
									}

2.2.4.2. 자식 연결자(Child combinator)

CSS Level 2 선택자
자식 연결자(Child Selector)는 특정 요소의 자식 요소를 선택합니다.
첫 번째 요소와 일치하는 요소의 직접적인 하위 요소인 두 번째 선택자와 일치하는 요소만 일치합니다.
두 번째 선택자와 일치하는 요소는 첫 번째 선택자와 일치하는 요소의 직계 자식이어야 합니다.
특정 요소의 자식 요소를 선택. 한단계 아래에 있는 요소만 선택한다.

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

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

CSS Level 2 선택자
형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용합니다.
인접한 형제 선택자(Adjacent Sibling Selector)는 요소의 형제 요소 중 첫번째 형제 요소를 선택하며,
지정된 요소의 인접한 형제와 만 일치합니다. 즉, 요소는 동일한 상위 요소를 가져야하며 지정된 요소 바로 다음에 와야합니다.

셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택하며, A와 B 사이에 다른 요소가 존재하면 선택되지 않습니다.

Element + Element(셀렉터A + 셀렉터B)

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

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

[인접한 형제 선택자]

2.2.5. 속성 선택자(Attribute Selector)

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

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

[attribute]

지정된 속성을 가진 요소를 선택.
ex) h1[title] /*title 속성을 가진 h1 요소를 선택*/

[attribute="value"]

속성의 값이 value인 요소를 선택. 속성값이 정확히 일치해야 합니다.
ex) h1[title="abc"] /*title 속성의 값이 abc인 h1 요소를 선택*/

[attribute~="value"]

지정된 속성 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택합니다.
속성의 값이 value를 포함한 요소를 선택. 포함 여부는 단어 기준으로 판단합니다.
ex) h1[title~="abc"] /*title 속성의 값이 abc를 포함한 h1 요소를 선택. "abc xyz"는 선택되지만 "abcxyz"는 선택되지 않습니다.*/

[attribute|="value"]

지지정된 속성 값과 일치하거나 지정 속성 값 뒤 연이은 하이픈("값-")으로 시작하는 요소를 선택합니다.
속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다.
ex) h1[title|="abc"] /*title 속성의 값이 abc이거나 abc로 시작하는 h1 요소를 선택. "abc-xyz"는 선택되지만 "abc xyz"는 선택되지 않습니다*/

속성 선택자(Attribute Selector) 예제

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

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

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

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

:link

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

:visited

방문한 링크일 때
사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태입니다.

:active

클릭된 상태일 때
사용자가 마우스로 링크를 클릭하고 있는 상태입니다.

:hover

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

:focus

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

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

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

요약 설명

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

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

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

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

CSS Level 2 선택자
language 의사 클래스는 문서의 언어를 기반으로 요소를 선택합니다.

특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용합니다.
최상위 html에 lang="언어코드"가 있으면 최상위에 있는것이 먼저 적용됩니다.

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