[CSS] 선택자 비교 (공백, > // +, ~)

안녕하세요. 엄티입니다.

오늘은 CSS selector 중 비슷하지만 조금 다른 것들을 알아보겠습니다.

오늘은 그 중에서 4 가지 경우를 알아볼건데요.

1. A B
2. A > B
3. A + B
4. A ~ B

1, 2 번은 A 태그 안에 있는 B 라는 태그 가 있을 경우,

3, 4 번은 B라는 태그가 A 태그 랑 같은 레벨에 있을 경우에 적용 됩니다.

div p

div > p

1. div p: div 자식안에 있는 모든 p 의 적용
2. div > p: div 의 직계자손인 p 의 적용

'List Item 1' 가 p 태그로 감싸져 있는데 1 번인 경우 div 에 자식안에 있는 모든 p의 적용 되기 때문에 ul 태그 안에 있어도 스타일이 적용 되는 반면 2 번인 경우 'List Item 1' 이 div 의 직계 자손이 아니기 때문에 스타일이 적용 되지 않는 것을 볼 수 있습니다.

 

ul + p

ul ~ p

3. ul + p: ul 바로 밑에 있는 p 에만 적용
4. ul ~ p: ul 밑에 있는 모든 p에 적용

앞에 정리한것 처럼 + 인 경우는 바로밑에 있을 경우에만 적용 됩니다. 따라서 3번에서 ul 태그 바로 밑에 있는 p 만 적용 되고 나머지는 적용 안되는 것을 볼 수 있습니다. 그에 반하여 4번에는 ul 태그 밑에 있는 모든 p 태그에 적용 되는 것을 볼 수 있습니다.

 

이상 같지만 조금은 다른 경우의 선택자를 보았습니다.

나중에 더 많이 정리할 수 있는 기회가 와서 정리하면 좋겠네욤

참조: 반드시 기억해야할 CSS selector

반드시 기억해야 하는 CSS 선택자 30개