CSS Selector

CSS 의사 클래스

Pseudo 의 사전적 의미는 가짜를 의미하지만 문서상 "의사, 가상" 의미로 표현 이용되고 있습니다.
CSS 의사 클래스는 4가지 종류로 구분할 수 있습니다.

링크 의사 클래스

링크를 선택한 히스토리에 따른 처리(예를 들어서 한 번 방문한 링크는 색상을 다르게 처리)

• :link : href 값의 히스토리가 없는 경우
• :visited : href 값의 히스토리가 있는 경우
• :target : 대상 앵커

동적 의사 클래스

• :active : 대상 요소를 클릭한 경우(자바스크립트와는 달리 실제로 마우스를 누르는 동안에만 적용)
• :hover : 대상 요소에 마우스를 올리는 경우
• :focus : 대상 요소에 포커스가 있는 경우

구조적인 의사 클래스

• :empty : 자식이 없는 요소
• :not(x) : x 요소를 제외한 요소들을 선택할 때 사용
• :first-child : 첫 번째 자식 요소
• :last-child : 해당 선택자의 마지막 요소
• :only-child : 형제가 없는 요소
• :only-of-type : 형제 가운데 고유한 타입을 갖는 요소
• :nth-child(n) : n번째 자식 요소
• :nth-of-type(n) : n번째 타입의 요소
• :nth-last-of-type(n) : 해당 타입의 뒤에서부터 계산된 n번째 요소
• :first-of-type : 특정 타입의 첫 번째 자식 요소
• :last-of-type : 특정 타입의 마지막 자식 요소

국내의 환경상 이용률이 떨어지지만 장래, 그리고 현재 모바일에서 바로 사용 가능한 것들 중 유용한 선택자 중심으로 알아보도록 합니다.

:last-child

:last-child 는 :first-child와는 반대로 마지막 자식 요소를 찾습니다.

그리고 중요한 점은 자기 자신이 자식이어야 한다는 것입니다.

See the Pen :last-child 예제 by jaeheekim (@jaehee) on CodePen.

:nth-child

n번째 자식 선택자는 첫번째나 마지막을 선택하는 것보다 더 융통성을 발휘하여 선택할 수 있게 도와줍니다.
즉, 다섯 번째 또는 여덟 번째 자식을 선택하고 싶을 경우에 :nth-child(n) 를 사용하면 아주 쉽게 선택할 수 있습니다.

See the Pen pbBRgk by jaeheekim (@jaehee) on CodePen.

:nth-of-type(n)

:nth-of-type(n) 은 가상 클래스 이름에도 나와 있듯이 type 을 가리킨다는 것에 주목해야합니다.
그리고 type 을 다른 말로 태그 선택자라고 하는데 type 이 태그를 의미하는 것을 숙지하지 못하고 사용한다면 혼동스러울 수 있습니다.

다음의 예제를 통해 알아보도록 합니다.

See the Pen nth-of-type(n) 예제 by jaeheekim (@jaehee) on CodePen.

이 :nth-of-type(n) 은 언듯보기엔 :nth-child(n) 와 다를 게 없이 보일지도 모릅니다.

하지만 :nth-child(n) 예제 코드와 다른 점이 있다면 타입(태그)만을 필터링한다는 것입니다.

즉, 타입(태그) 중에 n번째를 선택한다는 의미입니다.

위의 마크업을 살펴보면 .demo 클래스가 p, ul 타입에 모두 선언되어 있습니다.
그래서 .demo:nth-of-type(2) 이 의미는 p 타입중에 2번째, ul 타입 중에 2번째를 선택하기 때문에 위와 같은 결과가 나온 것입니다.

:nth-last-of-type(n)

지금까지의 가상 선택자를 이해했다면 :nth-last-of-type(n)) 이 선택자도 무리없이 이해할 수 있을 것입니다.

이 선택자는 위에서 설명했듯이 해당 특정 타입에서 뒤에서부터 n번째 요소를 선택하게 됩니다.

그리고 :nth-first-of-type(n) 인 first 가 없는 이유는 어차피 :nth-of-type(n) 이 선택자가 앞에서부터 찾아 선택하기 때문입니다.

:first-of-type 과 :last-of-type

:first-of-type, :last-of-type 이 가상 선택자 역시 특정 타입 중에 첫 번째요소, 마지막 요소를 선택하는데 이용됩니다.

다음의 코드를 살펴보도록 하겠습니다.

See the Pen :first-of-type, :last-of-type 예제 by jaeheekim (@jaehee) on CodePen.

지금까지 주요한 가상 선택자에 대해 알아보았습니다.

구조적인 가상 클래스는 선택자의 이름(naming)을 생각해 보면 쉽게 이해하실 수 있습니다.

즉, 가상 선택자 이름에 모든 힌트가 포함되어 있다는 의미입니다.

그리고 (n) 의 사용 여부도 nth- 가 n번 째를 선택하는 의미이므로 따로 외울 필요도 없을 것입니다.

마지막으로 :empty 와 :not(x) 에 대해 알아보도록 합니다.

:empty 와 :not(x)

:empty 는 콘텐츠나 자식이 없는 요소들을 선택하고 :not(x) 는 x 를 제외한 모든 요소들을 선택할 때 사용할 수 있는데 여기서 x 는 또 다른 선택자를 의미합니다.

이해를 돕기 위해 아래의 코드를 살펴보도록 하겠습니다.

See the Pen :empty, :not(x) 예제 by jaeheekim (@jaehee) on CodePen.

자식과 형제 선택자

자식과 형제 콤비네이터(Child & Sibling combinators)은 선택자 모듈에서 보다 발전된 선택자들입니다.

이 들 선택자들에 대해 간단히 알아보도록 합니다.

자식 콤비네이터

CSS 의 하향식(Cascade) 선언은 유용하지만 때때로 불필요할 수도 있고 사용자가 원하지 않을 수도 있습니다.

예를 들어서 중첩된 순서없는 목록에서 스타일을 취소하고 원상복귀시켰던 경험들이 있을 것입니다.

여기서 활용할 수 있는 것이 바로 자식 콤비네이터(Child Combinator)입니다.

다음의 예제를 통해 간단히 알아봅니다.

See the Pen child combinator #1 by jaeheekim (@jaehee) on CodePen.

위 예제에서 중첩된 ul 에 border: none; 을 정의하여 중첩 ul 의 테두리를 제거하였습니다.

이러한 하향식 선언을 사용하지 않고 스타일을 재선언하지 않으려면 다음고 같은 방법인 지식 콤비네이터를 사용할 수 있습니다.

css

div > ul {
	border: 1px solid blue;
}

위와 같이 자식 콤비네이터를 사용하면 하향식 선언시 발생하는 불필요한 상황을 피할 수 있습니다.

자식 선택자를 사용할 지 일반 하향식 선언을 사용할 지는 디지인에 따라서 상황 판단하여 선택적으로 사용하는 것이 좋습니다.

인접 형제 콤비네이터와 일반 형제 콤비네이너

인접 형제 선택자(adjacent Sibling Combinator)는 요소의 바로 뒤에 오는 형제를 대상으로 합니다.

그리고 일반 형제 콤비네이터(general sibling combinator) 선택자는 인접 형제 콤비네이터와 유사하자만 인접 선택자가 오로지 해당 요소 바로 뒤에 오는 형제를 목표로 하는 인접 선택자와는 달리, 이 선택자는 해당 요소 뒤에 나오는 어떤 형제든지 이를 대상으로 할 수 있습니다.

다음의 예제를 통해 살펴보도록 합니다.

See the Pen adjacent sibling combinator by jaeheekim (@jaehee) on CodePen.

인접 형제 선택자는 IE7+ 및 모던 브라우저 모두 지원하지만 일반 형제 선택자는 모던 브라우저와 IE9+ 만을 지원합니다.

Jaehee's WebClub