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번째 자식 선택
이글을 쓰게 된 핵심..!! 이렇게 이론은 잘 알겠는데,, 막상 적용해보면 에러에 부딪히게 된다. 왜 내 생각이랑 다른 결과가 나오지??
위의 코드에서 분명 css에 div:nth-child(3)을 주었으니 3만 빨간색으로 칠해져야하는 것 같은데,, div의 전체가 다 색칠되었다. nth-child에 (1), (2)를 넣어보면 생각대로 잘 작동하는데 뭐가 문제일까?
이코드에서 살펴보면, p태그가 하나 추가되어 div의 위치가 하나 밀렸더니, 우리가 생각한 것 처럼 3만 선택된 것을 볼 수 있다.
여기서 문제점을 눈치챘겠지만, div:nth-child는
"div 속에 있는 세번째 자식을 선택해줘!!"
가 아닌,"부모가 누구든 상관없어. 그냥 세번째에 있는 div를 선택해줘!"
라고 이해하면 된다. 그렇다면 첫번째 코드펜의 코드에서 div는 <body>라는 부모속에 있는 세번째 div와, 부모 div속의 세번째 div가 함께 선택되면서 div 전체가 선택된 것으로 보이는 것이다. 더 이해하기 쉽게 코드로 나타내자면
이 코드를 보면 이제 한번에 이해가 될 것이다.
<body> 태그속의 세번째 <div>가 선택되어 그 안에있는 <p>태그가 모두 선택되었고, <section> 태그안의 세번째 <div>인 3 또한 함께 선택되었다.
div.nth-child() = 부모는 누구든 상관없어. 세번째에 있는 div요소를 찾아줘!!!
순간 헷갈렸던 분들도, 개념을 잘못 이해하고 있으셨던분들도 이제는 이 문장이 완벽하게 이해됐을 것이다.
