使いそうで忘れそうなCSSプロパティ

  • 34
    いいね
  • 0
    コメント

counter-increment

擬似要素で連番を表示させたい時に使う
contentに代入する

counter-reset

連番のカウンターをリセットする

nth-childの限定方法

最初の4つだけ

CSS
:nth-child(-n+4){}

7個目から11個まで

CSS
:nth-child(n+7):nth-child(-n+11){}

最後から2番目

CSS
:nth-last-child(2){}

最後から2番目かつ奇数のとき

CSS
:nth-last-child(2):nth-child(odd){}

要素が一つのとき

CSS
:only-child{}

-webkit-tap-highlight-color

スマホでタップした時の色を変える
下記では透明になる

CSS
-webkit-tap-highlight-color: rgba(0,0,0,0); 

text-align: -webkit-center;

select要素を中央寄せにするプロパティだが、他のことでも機能することがある
text-align: center;
で中央に寄らない場合は、一度使ってみると良いかも
firefoxは
text-align: -moz-center;

Youtubeのレスポンシブ用

Youtubeを縦横比を保ったまま可変する

HTML
<div class="youtube">
  <iframe width="560" height="315" src="URL" frameborder="0" allowfullscreen></iframe>
</div>

CSS
.youtube{
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

-webkit-touch-callout

タップでのポップアップ非表示

-webkit-text-size-adjust

拡大した時のフォントサイズをどうするか
だいたいは100%で指定で問題なさそう

文字の改行の設定

word-breakは問答無用で折り返し
word-wrap,overflow-wrapはできる限り単語区切りで折り返ししてくれる
overflow-wrapはword-wrapの後継プロパティ、互換性が微妙なので両方記載しておくと良い
もし折り返しがうまくいかない場合はbodyに対して指定してあげるとうまくいくことがある

CSS
  -ms-word-break: break-all;
      word-break: break-all;
  -ms-word-wrap: break-word;
      word-wrap: break-word;
  overflow-wrap: break-word;

:hoverの設定

クラスactive以外のa要素のみ指定

CSS
a:not(.active):hover{}

@media (hover){}

今はまだ草案段階(策定予定らしい)みたいだが、これが使えるようになるとhoverが可能なデバイスのみ限定で指定できそうなので
早く使えるようになってほしい

チェックしたinput要素をハイライトする

CSS
input:checked + label{
  background: yellow;
}

文字選択中のスタイル変更

CSS
::selection{
  color: #000;
  background-color: #fff;
}
::-moz-selection{
  color: #000;
  background-color: #fff;
}

一文字目だけスタイルを変える

CSS
:first-letter{
  color:#000;
}

リンクの種類でスタイルを変える

CSS
a[href^="http://"]{
}
a[href^="mailto:"]{
}
a[href$=".pdf"]{
}

カラム数を指定する(IEは10から対応)

下記だと3カラムになる

CSS
-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;

テキストを選択できないようにする(IEは10から対応)

スマホには-webkit-touch-calloutも使うと良い
-webkit-user-dragはドラッグができないようにするプロパティ

CSS
-webkit-user-drag: none;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

要素の鏡面反射

対応ブラウザ少ない

CSS
 -webkit-box-reflect: 

画像置換

階層を一つ深くする

CSS
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px,1px,1px,1px);

指定したクラスから始まる要素のみスタイルを当てる

CSS
ul[class^="list"]{}

上記だとクラス名「list」から始まるul要素のみ

指定したクラスを含む要素にスタイルを当てる

CSS
ul[class*='list']{}

上記だとクラス名「list」を含むul要素にスタイルが当たる

指定したクラスで終わる要素にスタイルを当てる

CSS
ul[class$='list']{}

上記だとクラス名「list」で終わるul要素にスタイルが当たる

更新予定、、