いくつかメモメモ
・サイズの計算
|
1 2 3 |
.test{ wodth:calc(100% - 20px); //横幅100%のサイズから20pxをマイナス } |
・リストなどで最後だけ適用したくないときとか
|
1 2 3 |
li:not(:last-child) { padding-right: 10px; } |
・n番目とかの指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//:last-child（最初） //:first-child（最後） li:nth-child(5) { //指定番号 color:#000; } li:nth-child(odd) { //odd は奇数 color:#fff; } li:nth-child(even) { //odd は偶数 color:#f00; } li:nth-child(5n) { // n は倍数 例：5n なので5,10,15,20....と続く color:#ff0; } li:nth-child(4n+1) { // n 任意の数をプラスできる。上と同じ結果になります。 color:#333; } #test p:first-of-type { // #test内の最初の要素がpではない場合にこれを使う color:#666; } //:nth-of-type(2) などnも使えます。 //要素が入り混じる場合に便利 |