cssのセレクタや疑似クラスを勉強中。
この辺は奥深いので新たな発見がいっぱい。
kaminariのページネイトに関して、左右2個ずつ表示ではなくて、固定長で5マス表示に切り替えたいんだけど、そんなオプションがなくて困る。if文でつなぐしかないのかな。
css
優先順位
id > class > typeセレクタの順
:not()内にid指定を伴う場合もid指定と同様に優先されてしまうため、cssの上の方に記載したとしても強弱関係が強くなり、打ち消せない。
:not()
指定した要素以外をセレクトする。
div:not(p)セレクタ > セレクタ
直下の子要素を選択。
セレクタ + セレクタ
隣接セレクタ。直後のセレクタを選択できる。
複数繋げて書くこともできる。
セレクタ＋セレクタ＋セレクタ
h1+h2+p
とすると、h1の隣にh2があってなおかつp要素がh2に隣接している場合にスタイルが適用される。
セレクタ ~ セレクタ
弟要素をセレクトする。
1つではなく、該当する弟要素の全てに適用される。
セレクタ > セレクタ
子要素を選択する。直下の子要素のみで、孫要素には影響しない。
ラジオボタン
1つしか選べない。
nameを同一に指定したボタンは一連のボタンと認識される。
チェックされたかどうかはinput[type=radio]:checkedで判定できる。
<input type="radio" id="b1" name="b" class="b">
<label for="b1" id="b1_1">すべて</label>
<input type="radio" id="b2" name="b" class="b">
<label for="b2">レディース</label>pointer-events
defaultではauto.
noneにすることでアクションを起動させない。
具体的にはaタグのリンクへ飛ぶ動作やフォーカスさせる時。
pointer-events: none;この機能を使って、親要素でのアクションを否定するが、子要素でautoを指定することでアクションの機転を作ることができる。
<a>
<p></p>
<span></span>
</a>
a{pointer-events: none;}
p{pointer-events: auto;}上記のように設定すると、ｐタグをクリック時にaタグのアクションを発動できる。
1つのdivの中に複数の要素を持ち、:hoverした時に一部のスタイルを変えるという動作も、pointer-eventを使って制御することで、別の要素にhoverした際に別の要素のスタイルを変えるということもできる。
<div>
<p>hoge</p>
<button>fugafuga</button>
</div>
div{pointer-events: none;}
button{pointer-events: auto;}
div:hover p{
color: red;
}上記はdivのhoverイベントの惹起をbtnに限定している。
その上で、イベント発行時にｐタグのスタイルを変更している。
html
tabindex
tabindex=0を与えるとキーボードのtabでフォーカスできるようになる。
1以上の数字を与えると優先順位を指定できるが、管理が煩雑になるため使わない。0を指定しておけばブラウザが解釈する順序で表示される。
またtabindex=”-1″を与えるとタブキーではフォーカスが当たらないようになる。
<div tabindex="0">hogehoge</div>kaminari
ビューの変更
rails g kaminari:views default上記のコマンドで以下のviewファイルが作成され、これを編集することで変更する。
create app/views/kaminari/_next_page.html.haml
create app/views/kaminari/_gap.html.haml
create app/views/kaminari/_last_page.html.haml
create app/views/kaminari/_page.html.haml
create app/views/kaminari/_prev_page.html.haml
create app/views/kaminari/_paginator.html.haml
create app/views/kaminari/_first_page.html.haml件数表示
Displaying items 1 – 4 of 10 in total
上記のような総件数と表示中の件数を出すためには以下のようにhamlで記述する。
= page_entries_info @items, entry_name: 'item'
コメント