CSS 속성 선택자

몇 달 전에 구입했던 CSS 책에서 "속성 선택자"에 대해 간략히 설명한 것을 본 적이 있습니다. 당시에는 몇 가지 제한적인 상황에서만 사용되는 것으로 이용하고 별로 눈 여겨 보지 않았습니다. 하지만 최근에 어떤 분이 워드프레스 관련 카페에서 TablePress 플러그인의 수 많은 테이블에 대해 일일이 CSS를 입력하는 데 이 작업을 전체적으로 적용할 수 있는 방법이 없는지에 대한 질문을 한 것을 본 적이 있습니다.

가령:

#tablepress-1 th.column-1,
#tablepress-1 td.column-1 {
border-right: 1px dotted grey;
}

#tablepress-1 th.column-2,
#tablepress-1 td.column-2 {
border-right: 1px dotted grey;
}

#tablepress-1 th.column-3,
#tablepress-1 td.column-3 {
border-right: 1px dotted grey;
}

#tablepress-2 th.column-1,
#tablepress-2 td.column-1 {
border-right: 1px dotted grey;
}
...

위와 같이 비슷한 속성자 이름이 반복되는 경우입니다. 위와 같이 일일이 적어주는 것은 아무래도 비효율적이겠죠. 만약 정규식(Regular Expression)을 적용할 수 있다면 얼마나 좋을까요?

제한적이지만 정규식을 사용할 수 있는 방법이 속성 선택자(Attribute selectors)라는 것입니다. 이 페이지에서 CSS의 속성 선택자에 대한 전체적인 내용을 볼 수 있습니다.

다음과 같이 요약할 수 있습니다.

[att]
값에 관계 없이 해당 속성(att)을 가진 요소

[att=val]
속성(att)이 val인 요소. 이런 형태는 많이 봐서 쉽게 이해가 될 것입니다.
예) span[class="example"] ==> class가 정확하게 example인 span

[att~=val]
속성(att)의 값(val)이 공백으로 분리된 단어인 요소.
예) a[rel~="copyright"] { ... } - rel에 copyright 단어가 포함된 "a" 요소

[att|=val]
속성(att)의 값이 정확히 "val"이거나 "val"로 시작하고 곧바로 "-"(U+002D)이 붙는 경우. 다음 예를 살펴보면 쉽게 이해가 되실 것입니다.
예) a[hreflang|="en"] - hreflang 속성이 "en"으로 시작하는 "a" 요소: "en", "en-US", "en-scouse" 포함

다음 3개는 속성의 값 내의 하위 문자열 일치에 사용할 수 있는 추가 속성 선택자입니다.

[att^=val]
속성(att)이 "val"로 시작하는 요소.
예)
HTML:

<h1 rel="external-link yep">Attribute Begins</h1>

CSS:

h1[rel^="external"] { color: red; }

속성 rel의 값이 "external"로 시작하는 h1 요소.

[att$=val]
이것의 위의 경우와 반대로 속성(att)이 "val"로 끝나는 요소를 나타냅니다.
예) a[href$=".html"] - href 속성의 값이 ".html"로 끝나는 "a" 요소.

[att*=val]
속성의 값("val")이 한 번 이상 포함되어 있는 요소.
예) p[title*="hello"] - title 속성 내에 "hello"가 한 번 이상 나타나는 "p" 요소.

그럼, 본론으로 들어가서 TablePress의 많은 테이블의 요소에 이 속성 선택자를 사용하여 수월하게 일괄적으로 원하는 작업을 할 수가 있게 됩니다. 규칙성을 살펴보면

#tablepress-<번호> th.column-<번호>,

위와 같으므로 다음과 같은 간단한 서너 줄의 코드로 모든 경우를 커버할 수 있습니다.

table[id^="tablepress"] td[class^="column"],
table[id^="tablepress"] th[class^="column"] {
border-right: 1px dotted grey;
}

테스트로 TablePress Demo 페이지에서 위의 코드를 적용해보았습니다.
WordPress TabelPress Demo

회색은 눈에 잘 띄지 않아서 "grey" 대신 "red"를 사용했습니다. 적용해보니 첫 번째 테이블은 잘 되지만, 두 번째 테이블 샘플은 표가 복잡해서 그런지 부분적으로만 적용되네요. (하지만 background 색상으로 추가해보니 모든 테이블에 제대로 적용됩니다.) 만약 표가 일관되는 경우에는 위의 방법을 사용하면 충분한 것 같습니다. 복잡한 표의 경우 모든 경우의 수를 따져서 조금 복잡하게 코드를 만들어야 할 것으로 생각되네요.

참고 사이트:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.