yuheijotaki.com

忘れがちなCSS

CSSについて、基礎的な所がすっぽり抜けてしまっているときがあるなーと

セレクタの種類だけでもこんなにあるんですねー
知っているやり方でできるものならば、もっと良いやり方があるのに、知っているやり方でやってしまう
知らないことがあると、それだけ書ける時間も増えてしまうし悪いことばかりなので、まぁいろいろ勉強したり経験してやっていくしかないですね…

そういうなかで最近知ったもの or ちゃんと理解した方が良さそうなもの

◯隣接セレクタ +
ある要素の直後のみにスタイルを適用させる
ナビゲーション(リスト)の仕切り線とや、ブログのhtmlなどで使えるのでは
IE7+

◯子要素セレクタ >
子孫(A B)とは違い、子要素(A > B)のみにスタイルが適用される
IE7+

◯擬似要素 after,before
要素の前後にコンテンツを追加する
2種以上のスタイルがあるリストとかに使えるかな…
IE8+

◯brの無効
無効、という言い方が正しいのかは分かりませんが
スマホで改行を無くしたい場合、メディアクエリで分けてPCのみ表示にできたりする

◯background-position
こちらはプロパティですが

background: url(bg.png) no-repeat right 100px top 100px;

urlにはカンマ入れなくても良い
position は right 100px と書ける