CSS 다중선택자 띄어쓰기 유무에 따른 차이

bible_k_·2023년 3월 2일
0

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인 선택자로 사용해야하는 문제였다.

문제 지시사항의 표현이 애매해서 더 헷갈렸지만.. 덕분에 다시 정리하면서 공부할 수 있었다.

profile
후론트엔드 개발자

0개의 댓글