CSS 다중 선택자를 사용할 때 띄어쓰기 유무에 따른 차이
오늘 엘리스 트랙 문제를 풀다가 헷갈리는 부분이었어서 정리해본다.
<body>
<div class="container">
<main role="main" id="main">
<article class="first_article">
</article>
<article class="second_article">
</article>
<article class="third_article">
</article>
<article class="fourth_article">
</article>
</main>
</div>
</body>코드를 형태를 요약하면 main태그에 article태그 3개가 들어있고 article태그들은 각각 다른 class를 갖고있다.
구체적인 컨텐츠값은 생략하였다.
#main article .first_article #main article.first_article
이 두 선택자의 차이는 클래스값 앞의 띄어쓰기이다.
결론부터 정리하자면
- 띄어쓰기는 '안에'로 해석할 수 있다.
하위개체인 자식을 선택하는 선택자이기 때문에 최종적으로 좁혀진 마지막 선택자에 속성이 적용된다. - 붙여쓰기는 '이면서'로 해석할 수 있다.
클래스값끼리 공백 없이 쓴 경우 여러 개의 클래스를 모두 지니고 있는 선택자에 속성이 적용된다. id, class, tag 선택자끼리 서로 붙여서 사용한 경우에, 위 코드를 예시로 들면 article 태그이면서 동시에 first_article클래스인 선택자로 선택된다. 보다 구체적으로 선택자를 선택할 수 있다.
ex1. 클래스끼리 붙여쓴 경우
.class1.class2
class1이면서 class2인 선택자
즉 클래스 속성 내에 class1 및 class2가 모두 설정된 요소를 선택한다.
ex2. 태그와 클래스를 붙여쓴 경우
div.class1
div이면서 class1인 선택자
~중에로 해석해도 된다. div중에 클래스가 class1인 선택자. 다만 하위 개념이 아니라는 것을 유념해야한다.
#main article .first_article
id가 main인 태그 안에 article 태그 안에 class가 first_article인 태그
#main article.first_article
id가 main인 태그 안에 article 태그 이면서 class가 first_article인 태그
위 문제의 html코드 구조상 article 태그 안에 class가 first_article인 태그는 없었다.
즉, article 태그와 first_article클래스를 띄어쓰기 하지 않고 작성하여 article태그 이면서 클래스가 first_article인 선택자로 사용해야하는 문제였다.
문제 지시사항의 표현이 애매해서 더 헷갈렸지만.. 덕분에 다시 정리하면서 공부할 수 있었다.
후론트엔드 개발자