CSS3のセレクタが多いからよく見るやつをまとめてみた【html/css初心者】

こんにちは。HTMLやCSSのいろんなチュートリアル見たりしてるんですがたまになんのセレクタかわからなくなるのでざっとまとめてみました。あくまで自分がよく見るやつなのでここに乗ってないものもあります。

ではこちらセレクタ一覧です。

結合系

a要素とb要素ってことでこ理解ください（笑）

a{}

ページ内のa要素すべてに適応。

a, b{}

aとbに同じCSSをつける

a b{}

aの中のbにCSSをつける

a>b{}

aの子要素のみに適応。もしb要素の前に違う親要素がある場合適応外。

a+b

aの次にあるbに適応。

Id、class系

classの場合は#ではなく.

#id/class名

id/classの名前に対応して適応

例

#sample{}

これはsampleと言う名前のidのみに適応。

#sample{}

a#id/class名

a要素でさらに、id/class名を持つidに適応。

例

p#sample{}

sampleと言うid要素を持つpに適応。

属性がついてるタグにのみ

属性とは

リンクとかinputで言うとtypeに当たるものですね。

属性1つだけ

 タグ[属性]{}

属性のもっと詳細化

属性がありつつその属性がなんの属性なのかを選べます。

 タグ[属性=リンク等]{}

擬似クラス

リストの最初だけ

ul li: first-child{}

リンク訪問、未訪問

a:link{}

訪問後

a:visited{}

マウスインとアウト

乗った時

a:hover{}

乗ってない時

a:active{}

要素がクリックされた時

input:focus{}

１行目だけ指定

要素:first-line{} p:first-letter{}

要素の前後

p:before{ content:”つけたい要素先” } p:after{ content:”つけたい要素後” }

たくさん書いたけどまだまだあります。

これはやってても使わないと覚えないからバラついて覚えそうですよね。

まぁとりあえずこんな感じです。疲れた…www

ではではSeeYaaaaaaaa!!!

sgw

フロントエンド

TwitterFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。