내가 몰랐던 CSS 선택자 feat. css-speedrun

셀프박제...ㅎ

CSS Speed run이라는 것이 있어서 해보았는데...
바로가가: https://css-speedrun.netlify.app/

사실 CSS와 그동안 꽤나 친해졌나고 생각했는데, 완벽한 착각이었다.

위 speed run에는 선택자 문제가 있는데, 첫 문제부터 버벅이더니 이후에는 제시되는 힌트가 아니면 풀 수 없는 지경에 이르게 되었다...

Speed run덕에 새롭게 배운 CSS선택자들에 대해 간략히 정리해본다.

1. not pseudo-class

https://developer.mozilla.org/ko/docs/Web/CSS/:not

• element:not(X) 으로 쓴다.
• 괄호()안에 무시할 요소를 넣으면 된다.

2. 전체선택자 *

https://developer.mozilla.org/ko/docs/Web/CSS/Universal_selectors

• ex) div아래의 모든 자식요소 선택 : div > *

3. 특성선택자 attribute selector

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

• element[attr=value] 형태
• value없이 attr만 적으면, 해당 attr을 가진 모든 요소가 선택됨
• [attr=value]의 형태로 적으면, attr가 value를 가진 요소가 선택됨

4. 일반 형제 결합자 general sibling

https://developer.mozilla.org/ko/docs/Web/CSS/General_sibling_combinator

• element1 ~ element2
• 두요소의 부모가 같고, element2가 뒤에 위치할 때 element2를 선택함

5. :enabled, :disalbed

https://developer.mozilla.org/ko/docs/Web/CSS/:enabled
https://developer.mozilla.org/ko/docs/Web/CSS/:disabled

• 활성화 / 비활성화 옵션

6. 선택자 목록 selector list

https://developer.mozilla.org/ko/docs/Web/CSS/Selector_list

• element1, element2, element3 ...
• 콤마(,)로 구분한다. 선택자에 포함된 것들과 일치하는 요소들을 선택한다

7. 인접 형제 결합자 Adjacent sibling combinator

https://developer.mozilla.org/ko/docs/Web/CSS/Adjacent_sibling_combinator

• element1 + element2
• element1 바로 다음에 오는 element2를 선택함(알고 있었는데 까먹음..ㅠㅠ)