woshidan's blog

あいとゆうきとITと、とっておきの話。

cssのセレクタについて

いよいよ就活がはじまってしまった。

一月中旬から選考が始まる企業があるので、目標にもう一回ホームページを書き出してみます。

現段階で忘れているところもあってあれなんですが……。

 

cssセレクタについて

ボタンの修飾など、できることは知っていても忘れていて不便だったのでとりあえずまとめておきます。

参考にしたのはこちら.

意外と知らない!?CSSセレクタ20個のおさらい

http://weboook.blog22.fc2.com/blog-entry-268.html

 

要素を指定

pやh1の見出しだったり、button要素の形だったり、そのcssを参照しているページ全体に設定した属性が反映されるようにしたい場合。

p {
}


クラスを指定

.class {
}

 

idを指定

#id {
}

 

子孫の要素に反映されるように指定

.content p {
}

半角スペースで区切るとそのクラスに属する要素のタグで包んだ中身全部に反映。

 

直下の要素にのみ反映

.content > p {
}

このあたりがよく分かってなかったので確認してよかった。

クソ長いクラス名を生成して、デザインがセンス以前に爆発するところだった。 

 

擬似クラスのつけ方

要素:hover {

}



他にもたくさんあるみたいですが、とりあえず自分が使いそうなのはこれくらいでしょうか。
直下の要素と子孫の要素についてはごっちゃになっていたので今日書いた分は明日整理して書き直したいです。
(書く前に調べましょう←)