본문 바로가기

개발/문제해결

[CSS]not 선택자 선택 안 됐던 이유

개발 도중 not 선택자가 안 돼서 한 번 실험해보았다.

문제가 됐던 코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>연습</title>
    <style>
      h1 :not(.e) {background-color:red;}
    </style>
  </head>
  <body>
    <h1 class="e">안녕하세요</h1>
    <h1>반갑습니다</h1>
  </body>
</html>


실행결과

간단한 코드인데 뭐가 문제가 된건지 모르겠다.

띄어쓰기를 붙이니까 해결됨

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>연습</title>
    <style>
      h1:not(.e) {background-color:red;}
    </style>
  </head>
  <body>
    <h1 class="e">안녕하세요</h1>
    <h1>반갑습니다</h1>
  </body>
</html>



결론 : 선택자 사용할 때 띄어쓰기 주의하자

'개발 > 문제해결' 카테고리의 다른 글

[CSS]grid 전체 화면 문제  (0) 2019.06.02