[CSS] class 가 없는 요소에 스타일을 적용하고 싶을 때

일단 제가 처했던 상황을 설명하자면, 어떤 웹페이지에 글을 작성하는데 마크다운으로 표를 넣었습니다. 마크다운으로 삽입한 표에는 당연히 id 나 class 가 없겠죠? 그래서 그냥 table 선택자를 이용해 스타일을 적용했습니다.

그런데 또 다른 방식으로 표를 삽입 하려고 하는데 그 표에도 원래 적용했던 table 요소의 스타일이 적용되다 보니 새로운 스타일을 적용하려면 기존 스타일을 다 무시하도록 !important 를 사용하거나 해야 하는 불편함이 있더라구요.

그래서 열심히 찾아보니 class 를 포함한 특성이 지정되지 않은 요소를 선택할 수 있는 선택자가 있었고, 그것은 바로 :not 이었습니다.

:not

:not 은 특정 조건을 만족하지 않는 요소를 선택하는 선택자입니다.

:not 을 이용해서 클래스가 없는 테이블을 선택하기 위해서는 아래와 같이 스타일을 지정할 수 있습니다.

table:not([class])

간단하죠? 마찬가지로 id 가 없는 테이블을 선택하기 위해서는 위 예제에서 class 대신 id 라고 적으면 됩니다.

문제해결

그럼 제가 처했던 문제를 해결 해볼까요?

기본적으로 마크다운으로 생성된 테이블은 id 나 class 가 지정되지 않으니 아래와 같이 스타일을 지정해줍니다.

table:not([class]) { margin: 1.5rem 0; }

이제 다른 방식으로 삽입할 표에는 임의로 new 라는 클래스를 넣어주고 스타일을 지정합니다.

table.new { margin: 3rem 0; }

이렇게 되면 new 라는 클래스를 가진 테이블은 기존 table 요소 스타일과 상관없이 독자적인 스타일을 편하게 적용할 수 있습니다.

주의사항

• :not 선택자는 거의 모든 데스크톱이나 모바일 브라우저가 지원하지만, 구형 ie 브라우저에서는 작동하지 않습니다.

끝.