ベストセラー人気 WordPress テーマTop 30 詳細

CSSプロパティセレクタ

Last Updated:2015年12月29日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

数ヶ月前に購入したCSSの本で「属性セレクタ」について簡単に説明したことを見たことがあります。 当時は、いくつかの制限的な状況でのみ使用されていることで利用してあまり注目してみました。 しかし、最近のいくつかの方が WordPress 関連のカフェで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"を使用していました。 適用してみると、最初のテーブルはよくなりますが、XNUMX番目のテーブルのサンプルは、表が複雑でそうなのか、部分的にのみ適用になりますね。 (ただし、backgroundの色に追加してみると、すべてのテーブルに正しく適用されます。)もし表が一貫している場合には、上記の方法を使用すると、十分なようです。 複雑な表の場合、すべての場合の数を計算して、少し複雑にコードを作成する必要があると考えますね。

参考サイト:



コメントを残す

コメント