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
이 두 선택자의 차이는 클래스값 앞의 띄어쓰기이다.
결론부터 정리하자면
.class1.class2
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인 선택자로 사용해야하는 문제였다.
문제 지시사항의 표현이 애매해서 더 헷갈렸지만.. 덕분에 다시 정리하면서 공부할 수 있었다.