선택자가 늘 헷갈린다. 명칭도 잘 모른다.
그래서 선택자에 대해서 정리해둔다.
명칭을 잘 알아두자. 그래야 모르면 검색할 수 있다. 사람들에게 설명할 수 있다.
무시하면 안 된다.
선택자를 사용할 때 유의할 점 하나는,
'스타일을 부여할 요소'를 선택자로 적어야 한다는 것.
은근히 내가 잘 헷갈리는 부분.
[용어]
선택자: 스타일을 부여할 태그, 클래스, 아이디.
선언 블록: 선택자에 부여할 스타일을 적어두는 공간. 선택자 뒤에 중괄호를 써서 표시한다.
선언: 선택자에 스타일을 부여하는 것을 '선언'한다고 한다. 하나의 속성/값이 하나의 '선언'이다. color:red 가 하나의 선언, 그 뒤에 border: 1px solid black이 또 하나의 선언.
속성: 스타일의 명칭. 굳이 따지자면 캐릭터의 스탯.
값: 스타일을 어떻게 정할 것인지. 캐릭터의 스탯 수치.
캐릭터의 '기본 체력'이 '속성', '1000'이 '값'.
[선택자의 종류]
크게 다섯 가지가 있다. 기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자.
기본 선택자는 네 가지. 전체 선택자(*), 태그 선택자, 클래스 선택자, id 선택자.
※우선순위는 id > 클래스 > 태그,전체.
밑에 쓴 것(나중에 쓴 것)이 우선 순위가 높다.
복합 선택자는 다섯 가지. 일치 선택자, 자식 선택자, 후손(하위) 선택자, 인접 형제 선택자, 일반 형제 선택자.
일치 선택자: 쉽게 말해 교집합 선택자. 여러 가지 조건을 동시에 충족시키는 요소를 찾아 스타일을 부여하는 것이다.
가령 'orange 클래스를 가지고 있는 span 태그'를 찾는다면,
'span.orange'라고 적으면 된다.
밑에 설명하는 하위 선택자랑 비슷한데 결정적으로 다른 점은 띄어쓰기가 없다는 것이다.
자식 선택자: 하위 선택자랑 비슷한데, 이건 화살표(꺾쇠)로 자식 요소를 선택한다는 게 다르다. 바로 밑에 있는 하나만 선택한다고 한다(검색).
span > .orange
※이게 하위 선택자보다 우선순위가 높다.
하위(후손) 선택자: 자식 선택자에서 화살표(꺾쇠)를 뺀 것. 하위 요소를 전부 선택한다고 한다(검색).
span .orange
인접 형제 선택자: 더하기로 표시한다. 특정 요소의 바로 뒤에 있는 형제 요소를 선택한다.
#tiger + li.
tiger라는 id를 가진 li의 바로 뒤에 있는 li를 선택한다.
일반 형제 선택자: 물결 모양으로 표시한다. 특정 요소의 뒤에 있는 모든 형제 요소를 선택한다.
#tiger ~ li
위와 다르게, tiger라는 id를 가진 li의 뒤에 있는 모든 li를 선택한다.
가상 클래스 선택자는 다섯 가지. 그런데 이것 외에 더 있을 수도 있다.
hover, active, focus, visited, checked.
:first-child, :last-child, :nth-child(n), :nth-of-type(n), :not
※가상클래스는 연이어서 여러 개 쓸 수 있다. 기차놀이 마냥.
input[type="text"]:nth-of-type(4):focus 이런 식으로.
※active는 누른 상태에서만 유지되고, focus는 text처럼 입력창이 활성화되는 류의 태그에만 유효하다. '클릭을 한 뒤에' 효과가 부여되게 하고 싶으면, javascript로 조절하는 수밖에 없다.
visited는 방문한 뒤에, 해당 요소에 스타일을 부여하는 것.
checked는 체크가 되어 있을 때, 해당 요소에 스타일을 부여하는 것. 이건 보면 알겠지만 input checkbox랑 radio에만 사용할 수 있다.
중요한 건, 그냥 checked나 visited만 쓰고 끝나는 게 아니라, 그 뒤에, '스타일을 부여할 요소'를 적어야 한다.
가령 체크박스에 체크 했을 때 라벨로 묶은 글자 부분에 효과를 부여하고 싶다면,
input[type="checkbox"]:checked + label
이렇게 써 줘야 한다.
'스타일을 부여할 요소'를 적어야 한다는 건 이런 의미다.
나는 그냥 checked까지만 썼는데, 왜 안 되는지 몰라서 어리둥절 했다.
first-child와 last-child: 첫 번째/마지막 자식요소를 가리킨다. 그런데 정확히는, 특정 요소가 아닌 전체 요소 중에서 첫 번째 자식요소를 가리킨다.
가령, div 안에 h2가 하나, li가 5개, div가 하나 있다고 치자. 이 때, li: first-child 라고 쓰면, 첫 번째 li가 선택되지 않는다. 그래서 스타일이 적용되지 않는다.
'첫째는 h2인데 왜 li를 첫째라고 하고 있지?'하면서 안 해준다.
nth-child(n): 이것도 마찬가지로 전체 요소 중에서 몇 번째 아이인지를 가리키는 것이다. 만약에 첫 번째 li를 선택하고 싶다면, li:nth-child(2)라고 써야 한다.
예시로 든 걸 보면 알 수 있듯이, 숫자는 1부터 시작한다.
n 자리에는 수식이 들어갈 수도 있고, odd나 even 같은 단어가 들어갈 수도 있다.
n+k는 k번째부터 시작한다는 뜻. 2n/even은 짝수번째 아이만 선택한다는 뜻.
nth-of-type(n): 이게 내가 보기에는 nth-child보다 유용해보인다. 이걸 쓰면 특정 요소 중에서 n번째 요소를 선택할 수 있다.
위의 예시를 들면, 그냥 li:nth-of-type(1)이라고 쓰면 된다는 거다.
:not('제외할 선택자'): 말 그대로 괄호 안의 선택자를 제외하고 스타일을 부여한다. 만약 제외할 선택자 자리에 가상 선택자를 사용하고 싶다면, 콜론도 그대로 써 줘야 한다.
가상 요소 선택자는 두 가지. after, before.
앞에 콜론을 두 개 붙이고 시작한다.
둘 다 스타일 내용에 contents 속성이 들어가야 한다.
after: 요소의 뒷 자리에 contents를 삽입한다.
before: 요소의 앞 자리에 contents를 삽입한다.
속성 선택자는 특정 속성을 가진 요소를 선택하는 것이다.
['속성명']: 해당 속성을 가진 요소에 스타일을 부여한다. 가령 [disabled]는 disabled 속성을 가진 요소를 선택한다. [class]로 class 속성을 가진 요소들을 전부 선택할 수도 있다.
['속성명' = '값']: 특정 속성과 특정 값을 가진 요소를 선택한다. [type="text"]는 type이 text인 요소를 선택한다.
그 외에도 물결이나 세로 막대를 쓰는 방법도 있다.
자세한 건 속성 선택자 검색.
