CSS 기초 (2) 선택자 / nth-child가 이상하다!?

1. 속성 선택자

• 태그[속성이름]

[속성이름] 에 해당되는 속성을 가진 태그를 모두 선택

a[href] {...}

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

속성이름의 속성값이 변수와 일치하는 태그를 선택

a[href="http://www.naver.com"] { ... }

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

속성이름의 속성값이 변수를 포함하는 모든 태그 선택 (단어)

a[href~="paullab"] { ... }

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

속성이름의 속성값이 변수로 시작하는 태그 선택

a[href^="http"] { ... }

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

속성값이 변수로 끝나는 요소를 선택

a[href$="kr"] { ... }

a[href$=".pdf"] { ... }

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

속성값이 변수를 포함하는 태그를 선택 (문자열)

a[href*="paul"] { ... }

💡 태그[속성~="변수"] 와 태그[속성*="변수"]의 차이는 뭘까??

• ~= 는 단어를 기준으로 *= 는 문자열을 기준으로 판단을 하게 된다. 예를 들어서 위와 같은 상황에서 paullabs 를 입력한다면, ~= 은 paullab 와 paullabs 를 다르다고 인식하고 *= 은 paullabs 안에 paullab가 포함되기 때문에 선택한다.
• = 가들어가면 완전 일치해야한다! * 은 모든것 중에 일부만 일치하면된다!

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

속성값이 변수이거나 변수로 시작하는 태그 선택

a[href|="http"] { ... }

2. 가상클래스 선택자

-실제로 html상에 존재하지는 않지만, 가상클래스를 사용하여 실제 존재하는 것 처럼 나타내는 선택자이다.
-: 콜론 하나로 표현!! 가상 '요소' 선택자는 :: 로 포현하므로 헷갈리지 않기!
ex) ::after, ::before

• hover, focus, active
  hover : 버튼위에 마우스를 올렸을때 사용
  focus : 요소에 포커스가 있을때 사용
  activ : 요소를 실행했을때 (버튼 누르기! 계속 누르고있으면 계속 실행)

⭐ nth-child()

• .class:first-child : .class인 요소 중 첫번째 자식요소를 선택

• .class:last-child : .class인 요소 중 마지막 자식요소 선택

• .class:nth-child(n) : .class인 요소 중 n번째 자식요소를 선택

• .class:nth-child(odd) : .class인 요소 중 홀수 번째 자식 선택

• .class:nth-child(even) .class인 요소 중 짝수 번째 자식 선택

• .class:nth-child(3n+1) .class인 요소 중 먼트 중 3n+1번째 자식 선택

이글을 쓰게 된 핵심..!! 이렇게 이론은 잘 알겠는데,, 막상 적용해보면 에러에 부딪히게 된다. 왜 내 생각이랑 다른 결과가 나오지??