CSSのコードを見ていて、

とか

というコードを見るのだが

「いったい、[~]という感じで[ ]で囲うことで何を意味しているんだ?」

と疑問に思っていた。

「CSSの[ ]ってどんな意味?」

って調べても、なかなか疑問を直接解消してくれる記事に出会えなかったので(ググリ力が無いだけも知れないが(笑))、色々と調べまくって、ようやく理解できたことを整理したいと思う。

スポンサーリンク

[ ]は「特定の属性を持つ要素に適用する」という意味

CSSにおける[]

「HTMLにおいて特定の属性を持つ要素に適用する」

って意味だ。

HTMLにおいて特定の属性を持つ要素っていうのは、例えば

という感じで記述されている要素のことだ。

ちなみに要素は<html>~</html><a>~</a>のことを指している
※詳しくは【HTML】タグってなに!?要素との違いとは?を読んでみてくれ。

そして、属性はどれかというと

lang="ja"」とか「href="index.html"

の部分を指す。

HTMLの属性

ただ、そもそも

「属性??これの意味がわからん、、、」

となる人も多いのではないだろうか?

プログラミング小僧はそうだった(笑)

HTMLにおける属性とは?

HTMLにおける属性の意味とは

「要素に性質を追加する」

と考えておくと良いと思う。

先程の例でいえば

「html内の言語は日本語です。

という意味です。

「リンクの行き先はindex.htmlです。

という感じの意味だ。

要素(<html>~</html><a>~</a>)に属性を追加した場合

「〇〇の△△は××です。

という感じで訳すとわかりやすい。

  • △△=属性
  • ××=属性値

と考えるとプログラミング小僧的にはわかりやすかった。

[ ]で特定の属性を持つ要素にだけスタイルを適用

HTMLの属性がなんとなくわかったところで、ようやく本題に戻る。

CSSで

「title属性を持ったp要素だけ文字色を赤色にしたい!」

と思った時に便利なのが[ ]での指定なのだ。

title属性を入れたp要素と入れていないp要素を用意する

CSSで上記のように指定すると

プラウザの表示
title属性あり
title属性なし

という感じでtitle属性が入っているp要素(<p>~</p>のこと)だけが文字色が赤に変わるのだ。

正直まだまだ初心者レベルのプログラミング小僧ではこういったCSSの指定を自分では使ったことがないのだが(笑)、知っておくとコードを修正する時に役に立つ。

スポンサーリンク
おすすめの記事