CSS Selector 심화

속성 선택자

태그[속성이름]

• 속성이름에 해당되는 속성을 가진 태그를 모두 선택합니다

태그[속성이름 = "변수"]

• 속성이름의 속성값이 변수와 일치하는 태그를 선택합니다.

태그[속성이름 ~= "변수"]

• 속성이름의 속성값 중에 변수를 하나의 완전한 단어로 포함하는 태그를 선택합니다.

태그[속성^="변수"]

• 속성의 속성값이 변수로 시작하는 태그를 선택합니다.

태그[속성$="변수"]

• 속성의 속성값이 변수로 끝나는 요소를 선택합니다.

태그[속성*="변수"]

• 속성의 속성값이 변수를 포함하는 태그를 선택합니다.

태그[속성|="변수"]

• 속성의 속성값이 변수 이거나 변수로 시작하면서 뒤에 바로 ‘-’(하이픈) 기호가 있는 태그를 선택합니다.

~= 는 단어를 기준으로 = 는 문자열을 기준으로 판단을 하게 됩니다. 예를 들어서 위와 같은 상황에서 paullabs 를 어떻게 인식할까요?
~= 은 단어를 기준으로 paullab 와 paullabs 를 다르다고 인식하고 선택을 못하게 되고 = 은 문자열을 기준으로 paullabs 안에 paullab 가 포함되기 때문에 선택을 합니다.

가상 클래스 선택자

• 실재로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동한다고 하여 가상 클래스 선택자로 부릅니다.

1. .foo:first-child : class="foo"인 ****엘리먼트 중 첫번째 자식인 엘리먼트를 선택합니다.

2. .foo:last-child : class="foo"인 ****엘리먼트 중 마지막 자식인 엘리먼트를 선택합니다.

3. .foo:nth-child(3) : class="foo"인 엘리먼트 중 3번째 자식인 엘리먼트를 선택합니다.

   1) .foo:nth-child(odd) : class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 모두 선택합니다.

   2) .foo:nth-child(even) : class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 모두 선택합니다.

   3) .foo:nth-child(n) : class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 모두 선택합니다. n은 0부터 1씩 증가합니다. (0, 1, 2, 3, 4, 5 … )

   4) .foo:nth-child(3n) : class="foo"인 엘리먼트 중 3번째 자식마다 모두 선택합니다. (3x0, 3x1, 3x2, 3x3, 3x4, 3x5 … )

   5) .foo:nth-child(3n+1) : class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 모두 선택합니다. (3x0+1, 3x1+1, 3x2+1, 3x3+1, 3x4+1, 3x5+1 … )

4. a:visited : 방문한 적이 있는 링크를 선택합니다.

상호 작용을 위한 가상 클래스 선택자

:hover

• 사용자가 마우스를 요소 위에 올렸을 때 적용됩니다. 스마트폰이나 패드 류의 터치스크린 기기에서는 사용자의 손가락이 호버되는 시점을 알 수 없기 때문에 모바일 기기가 많아지면서 점점 사용 빈도가 줄어드는 기능입니다.

:active

• 사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용됩니다.

:focus

• 요소에 포커스가 있을 때 적용됩니다. 클릭할 수 있는 요소나 폼컨트롤(input, select 등등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능합니다.

:checked

• 선택한 상태의 라디오, 체크박스, 옵션 요소를 나타냅니다.

가상 요소 선택자

::before

• 요소의 맨 첫번째 자식으로 HTML코드에 존재하지 않는 가상요소를 하나 생성합니다.

::after

• 요소의 맨 마지막 자식으로 HTML코드에 존재하지 않는 가상요소를 하나 생성합니다.

::selection

• 사용자가 선택하여 하이라이트 된 상태의 텍스트를 선택합니다.

https://www.w3schools.com/cssref/css_selectors.asp