CSS, 属性セレクタ

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

飴で上顎に口内炎が出来ました。

先日、歯医者に通院した時、治療後の痛みが酷かったので飴をたくさん舐めていたんです。

そうしたら飴のザラザラの摩擦のせいで、口内炎が出来てしまったのです。

おそらく、飴で口内炎の場所的に麻酔の傷跡が開いたのかと…

次の通院までに治るといいんですけどね。

飴で傷口が開いた男…

不名y…個性全開です。

本日、OWLetのパーツ制作で分からないことを質問したときに、

同じアドバンス隊の楠本さんが教えてくれた方法が

とても面白かったのでこちらにアウトプットいたします。

教えてもらったのは属性セレクタです。

属性セレクタとは、属性でセレクタを指定する方法です。

セレクタのおさらい

CSSの記述は

①セレクタ(どの要素を設定する?)

②プロパティ(何を設定する？)

③値(どんな風に設定する?)

の3要素でできています。

よく見かける基本的なセレクタは

p, div, aのようなHTMLのタグ名で指定するものや

.className, .hogeのようなclass名で指定するものがあります。

ちなみにHTMLのタグの中に

class, id, srcといった属性があり、それらの値を属性値と言います。

属性クラスタを使うと

a[class] {

 color: #fff;
}

のように[class]や[href], [src]など指定した属性を持つならばCSSの指示を与えると書くことができます。

また、[class*=“test”]でclass名にtestと言う文字を含むものといった属性値を限定する書き方もいくつかあります。

この属性セレクタを今まで使ったことがなかったので、とても勉強になりました。

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら