Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

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

f:id:sgwshu:20171008114457j:plain

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

 

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

 

結合系

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のみに適応。

 

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{}

nput要素が押されたあとにここに書いたcssが追加される。

 

1行目だけ指定

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

 

要素の前後

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

 

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

 

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

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

ではではSeeYaaaaaaaa!!!