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 と書ける