知らないと損をするかもしれない便利すぎるCSSセレクタ21個
セレクタは知っていても使っているのは4〜6くらいだったんですが、みなさんもそんな感じなのではないでしょうか?(僕と同じにするな)
で、今回は忘備録的にCSS1〜2のセレクタ特集記事を書いていきます。
CSSセレクタって?
CSSセレクタはスタイルを適用する対象を指定するもので、CSSをマスターするという事はセレクタをマスターすると同義と言っても過言ではないです。
という事で今回はCSS1〜2のセレクタを使ってサンプルで説明していきます。
何故CSS3のセレクタも紹介しないの?って声も聞こえてきそうですが、CSS3のセレクタはもの凄く便利ですがIE(6-8)で使えないのです。。。なので、先ずはこのセレクタ達を覚える為に書いていきます。
※ 本当はこれを書いている時点で記事は書き終えていてCSS3を追加するのがめんどくさ(ry1. * 全ての要素
アスタリスクは(*) 全てという意味です。
だけど、僕的には完全にケツめ(ry
* { color: blue;} |
すべての要素に適用されます。
p * { color: blue;} |
p要素の中にある要素全てに適用されます。
2. 要素名.sample クラス名を付けた要素
要素名の後に.クラス名を付けると
クラス名を指定した要素にスタイルに。
この記事書いてからこれ見てるんですが、このサンプルってあんまり・・ですよね?p.sampleとかあんまりしねーし。ダセーし。するんなら.a.b {プロパディ}とかの方がいい感じっすね。
p.sample { color: blue;} |
<p class="sample">この中身に適用されます<p><div class="sample">この中身には適用されません</div> |
この中身に適用されます
3. 要素名#sample 要素名#id名
基本的には先ほどのクラスと同じなのですが。idの場合は1つの要素にしか適用されません。
CSSは関係ないのですがidはページ内で一つだけしか存在させてはいけないらしくて、間違えて存在したとしても先に記述しているidが選ばれます。(#で移動とかjavascriptとかで)
簡単に一行で言うとプライマリーな存在です。
因みに「キミは僕にとってプライマリなー存在だから」って告白すると良いってどこかのwebデザイナーさんが言っていたような。
#sample { color: blue;} |
4. :link 未訪問のリンク
主にリンクテキストやtext-decorationを定義する時に便利ですね。
a:link { color: blue; text-decoration: none;} |
5. :visited 訪問済のリンク
訪問済みのリンクの色をカスタマイズしたり、とか。
a:visited { color: blue; text-decoration: none;} |
6. :hover マウスが乗っている要素
これでいろんなアニメーションしたくなりますよね。
.test_6 { transition: all 3s ease 0s; cursor: pointer;}.test_6:hover { color: #F7F7F7;} |
<span class="test_6">カーソルをあてて下さい。</span> |
7. :active クリック中の要素
クリックしている状態の時ですね、細かいアニメーションを施す時に利用します。
あと関係ないんですが、ものすごく遅く「クリック」って言うとなんでこんなにいやらしい感じに聞こえるんでしょうね。
可愛い女の子の「クリック」が聞きたいって男子は8割っていう噂です。
.test_7 { transition: all 3s ease 0s; cursor: pointer;}.test_7:hover { color: #F7F7F7;}.test_7:active { transition: all 0.3s ease 0s; color: blue;} |
<span class="test_7">クリッククリック!</span> |
8. :focus フォーカスされてある要素
主にフォームの中で使うイメージですね。綺麗なフォームを作る時に必須なセレクタです。
僕もあの子の事をフォーカスしたいって
深夜に思ってるんですが、どうにかなりませんかね。
.test_8 {}.test_8 input[type="text"] { transition: all 3s ease 0s; width: 160px; padding: 0;}.test_8 input[type="text"]:focus { width: 80%; padding: 5px;} |
<form class="test_8"> <input type="text" id="name" name="name" value="" placeholder="フォーカスしてくらはい"></form> |
9. :lang 特定の言語を指定した要素
うん、あんま使わないっすけど、グローバルな人材になったら使うとか使わないとか。
.test_9:lang { color: black;} |
10. :first-child 要素内の最初の子要素
話は変わるんですけど:last-childってCSS3だったんですね・・・。この記事書いている時に気付いて衝撃でした。これだけでもこの記事を書いた意味は十分あったはず。
.test_10 { padding: 0; margin: 0;}.test_10 li { list-style: none outside none;}.test_10 li:first-child { color: blue; } |
<ul class="test_10"> <li>かわります</li> <li>かわりません</li></ul> |
- かわります
- かわりません
11. :first-line 要素の最初の一行
僕コレ使った時ないんですけど多分便利っすよね。
.test_11 { padding: 0; margin: 0;}.test_11 li { list-style: none outside none;}.test_11 li:first-line { color: blue; } |
<ul class="test_10"> <li>かわります</li> <li>かわりません</li></ul> |
こうやって適当に打って一行目だけが変わるらしいですよ。でも、レスポンシブにしているとカオスになりそうですね。
12. :first-letter 要素の最初の一文字
これは使う場面が数多くある感じがしますね。
.test_12:first-letter { font-size: 50px; color: blue;} |
<p class="test_12">ブルーな1文字目。</p> |
ブルーな1文字目。
13. :before 要素の直前
:beforeと:afterはデザインしていく上で鉄板ですので絶対に覚えた方がいいセレクタナンバーワンです!
.test_13:before { content: "この文字はCSSの:beforeで出力しています"; font-size: 50px;} |
<p class="test_13">びふぉーあふたー</p> |
びふぉーあふたー
14. :after 要素の直後
こちらが最強セレクタです!floatをやっつけちゃうやつです。
.test_14:after { content: "この文字はCSSの:afterで出力しています"; font-size: 50px;} |
<p class="test_14">びふぉーあふたー</p> |
びふぉーあふたー
15. 要素名[target] 特定の属性を持つ指定要素
なにやら、ここらへんから普段使わないセレクタの登場ですね。
説明的には[]に属性名を入れて使うらしいですので、今回はaタグの属性titleで試してみましょう。
.test_15 a[title] { color: blue;} |
<div class="test_15"> <a href="#" title="タイトルあるよ">タイトルあるよ</a> <a href="#">タイトルないよ</a></div> |
16. 要素名[target="_blank"] 特定の属性値を持つ指定要素
次はもっと的を絞ったセレクタですね!
ここまでやらなければならない時があるって事ですね!!
.test_16 a[target="_blank"] { color: blue;} |
<div class="test_16"> <a href="#" target="_blank">blankあるよ</a> <a href="#">blankないよ</a></div> |
17. 要素名[属性名~="属性値"] 属性値候補と一致した要素
すんげーむずかしい。すんげー説明むずかしいよ。。
因みに ~ はチルダっていうらしいです
マ~とか隠語に使えますね。
p[class~="test_17"] { color: blue;}p a[title~="あーはん？"] { color: red;} |
<p class="test_17">僕のクラスはtest_17です。</p><p class="test_17">僕のクラスはtest_17で<a href="#" title="あーはん？">titleがあーはん？なaです</a>が終わったあとのpです</p> |
僕のクラスはtest_17です。
僕のクラスはtest_17でtitleがあーはん？なaですが終わったあとのpです
18. h1, h2, h3, h4, h5 複数のセレクタ
これはいわゆるアレもコレも一カ所に集めて定義出来る便利なセレクタですね。
いっその事全部コレで出来たら簡単なんですけどね。
.test_18 h1, h2, h3, h4, h5 { color: blue;} |
19. p strong 下の階層の子孫要素
こりゃー鉄板ですよね。それじゃーpの中のstrongの色を変えてみましょー。
.test_19 p strong { color: blue;} |
<div class="test_19"> <p>ここはpです<strong>ストローング!!</strong>ここもpです</p></div> |
ここはpですストローング!!ここもpです
20. p > strong 直下の階層の子要素
こうゆうのって何か日本以外の臭いがするカッコいい感じですよね!!使えばスキルアップするかも!?
.test_20 p > strong { color: blue;} |
<div class="test_20"> <p class="m_0">ここはpです<strong>ストローング!!</strong>ここもpです<span><strong>ここからpの中のspanの中のストローング!!</strong></span></p></div> |
ここはpですストローング!!ここもpですここからpの中のspanの中のストローング!!
21. h1 + p 直後に隣接している要素
これプログラム脳で理解しようとした時の方向性の違いにあせったんですよねー。ただの隣のやつに適応するだけなんて。紛らわしい 笑
.test_21 h1 + p { color: blue;} |
<div class="test_21"> <p class="m_0">pです</p> <h1>h1です</h1> <p class="m_0">pです</p></div> |
pです
h1です
pです
まとめ
どうでしたか?こんだけ覚えればCSSマスターもすぐなんじゃないかって思っちゃいますよね。でも実際こうやって書いていって1日も経っていないので
CSSって3日でマスターできるちょろいもんじゃないのかって半分本気で思っています。
全ての言語に言えますが、本当に簡単なんです。
簡単な事を難しくしてる輩が多いだけなんです。これまじ。
あと、脳的に言えば
難しいと思っているから難しくなるだけで
楽勝って思っていれば楽勝になるんです。
悩んでるだけじゃ一歩も前に進めないし、前を見ないで走っても目的地にはたどり着けないけど
楽勝だし、絶対にやり遂げてやるっていう根拠のない自信が少しでも自分自身を、人生を、押し進めるんじゃないのかなって深夜に思ったり思わなかったり。
ま、深夜の戯れ事でした。
