CSS 선택자(복합, 속성, 가상 클래스/요소 선택자)

복합 선택자

• 하위 선택자
  공백을 사용하여 나타냄
  앞 요소의 자손인 뒤 요소를 선택

  section ul { ... }

• 자식 선택자
  > 를 사용하여 나타냄
  앞 요소의 자식인 뒤 요소를 선택(바로 아래 자식을 선택)

  section > ul { ... }

• 인접 형제 선택자
  + 를 사용하여 나타냄
  + 를 기준으로 앞 요소 직후에 나오는 뒤 요소를 선택

  h1 + ul { ... }

• 일반 형제 선택자
  ~ 를 사용하여 나타냄
  ~ 을 기준으로 앞 요소 이후에 나오는 모든 뒤 요소를 선택

  h1 ~ ul { ... }

속성 선택자

1. 태그[속성이름] - 속성이름에 해당하는 속성을 가진 태그를 모두 선택
2. 태그[속성이름="변수"] - 변수와 일치하는 태그를 선택
3. 태그[속성~="변수"] - 변수를 포함하는 태그를 선택(단어)
4. 태그[속성^="변수"] - 변수로 시작하는 태그를 선택
5. 태그[속성$="변수"] - 변수로 끝나는 요소를 선택
6. 태그[속성*="변수"] - 변수를 포함하는 태그를 선택(문자열)
7. 태그[속성|="변수"] - 변수이거나 변수로 시작하는 태그를 선택

a[href] { ... }
a[href="https://velog.io"] { ... }
a[href~="velog"] { ... }
a[href^="http"] { ... }
a[href$=".pdf"]{ ... }
a[href*="velo"] { ... }
a[href|="http"]{ ... }

가상 클래스 선택자

• a:hover { } , p:nth-child(1) 와 같이 실재로 html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다.

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

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

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

.foo:nth-child(odd): class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 선택 (2n+1)

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

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

가상 요소 선택자

가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

가상 클래스 선택자와의 차이점

• 가상 요소 선택자는 콜론이 2개(가상클래스 선택자는 1개, 아닌 경우도 있음)
• 가상 요소 선택자는 마크업 없는 요소를 삽입(가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입)
• 가장 많이 사용하는 가상 요소 선택자: after, before

  p::before {  content: 'I am' }
   p::after {  content: '!!' }