CSSの結合セレクタ

CSS

※過去ブログの転記

結合記号 セレクタ 対象
+ E + F E直後の兄弟(隣接)要素Fに適用
~ F ~ F E以降の兄弟となる要素F全てに適用
> E > F 親要素Eの子要素Fに適用
(space) E F 親要素Fの子要素Fと孫要素Fに適用

こういう時に使う仮の要素名ってElementのEを使用するけどFってなんだろと思って調べたら アルファベット順でEの次はFだからっぽい。

form,inputで使えるtypeと属性

HTML

※過去ブログの転記

type

text,hidden,password,emailとか個人的によく使うものは省略。

type view 対象
input type="url" URLの入力の妥当性チェックを行ってくれる
input type="number" 数値の入力
スマホの時にキーボードが数値入力になる
input type="tel" スマホの時に電話番号入力に対応したキーボードが表示される
input type="search" 検索ボックスで使用する
input type="datetime-local" UTCによらない日時の入力(旧datetime)
input type="date" 日付の入力
input type="month" 月の入力
input type="week" 週の入力
input type="time" 時間の入力
input type="range" レンジ入力
input type="color" 色の入力欄
input type="image" 画像ボタンの生成
  • input type="tel"はPCや非対応ブラウザではinput type="text"の時と同じ
  • search,datetime-local,date,month,week,timeは値がある場合かつフォーカスした時とホバーした時に入力欄右端にリセット(x)が表示される (今までCSS+jQueryでわざわざxボタン作ってやってました...)
  • input type="search"はxボタンが表示される以外はinput type="text"の時と同じ
  • input type="color"すごい!!!JSColorいらないじゃん!!!と思ったらSafari非対応だったのでクソ
  • datetime系は今までdatetime-picker使ってたけどフォーマットとかに拘らないならdatetime-picker不要なのかもしれない
  • type="image"はクリックした画像のxy軸がname_x,name_yに入って返ってくる。

属性

attr view 対象
form enctype="multipart/form-data" type="file"の時に使用するデータの形式を指定する
form novalidate="novalidate" HTML上で設定したバリデーションチェックを行わない
input type="file" accept="image/jpeg,image/jpg" type="file"の時にファイル形式を指定できる
カンマ区切りで複数指定が可能
input autocomplete="off" 入力補完機能のon/off
input autofocus 画面表示のタイミングでautofocusを指定した入力欄にフォーカスする
input type="image" height="50" width="50" type="image"の時に画像のwidth,heightを設定
input max="5" 入力欄のtypeの最大値を設定できる
input min="5" 入力欄のtypeの最小値を設定できる
input maxlength="5" 入力欄の最大文字数を設定できる(文字数でカウント)
input multiple ファイル選択やドロップダウンメニューの複数選択
input pattern="^[a-z]+$" 正規表現の指定が可能
input required 入力必須とする
input size="10" 入力欄の表示サイズ
input step="10" 入力欄の倍数の指定
input list="listId"*1 listで指定したid属性のあるdatalist要素の中から入力候補を表示
  • autocompleteは個人的にはChromeの自動入力補完機能を使って欲しくない時に使う
  • max,minは入力欄のtypeによって最大(小)値を設定できる(ex. type="number" max="n",type="date" max="Y-m-d"...etc)

属性セレクタの指定方法

CSS

※過去ブログの転記

 

普段は適当なclass名をつけて 親 子or孫 {...} 形式でばかり書いているので属性セレクタの種類についてまとめてみた

セレクタ 対象
E[attr] 指定された属性を持つ要素
E[attr="val"] 属性の値が一致する要素
E[attr*="val"] 指定した値の部分一致(アスタリスク)
E[attr^="val"] 指定した値の前方一致(キャレット)
E[attr$="val"] 指定した値の後方一致(ドル)
E[attr~="val"] 複数区切りの中に指定した値が含まれている要素に対して適用(チルダ)
(ex. class="aaa bbb)
E[attr|="val"] -(ハイフン)を区切りとして指定した値のプレフィックスがついているものに対して適用(パイプライン)
(ex. class="val-aaa")
E[attr="val"i] 閉じタグ直前にiを入れると値の大文字小文字を区別しない

最後2つはこの記事書くまで知らなかった。便利

参考

developer.mozilla.org

CSSの擬似要素と擬似クラス

CSS

※過去ブログの転記

 

いつもどっちがどっちかわからなくなるし、いまいち把握できていないのでmemo
擬似要素と擬似クラスの違いをまとめてみました

擬似要素

指定したセレクタの一部に対して適用

セレクタ 対象
::before 要素の前
::after 要素の後
::first-line 要素の最初の1行
::first-letter 要素の最初の1文字
::selection 選択した要素*1
  • CSS3から擬似クラスとの判別がしやすいように セレクタ: ではなく セレクタ:: をつける
  • セレクタ: でも動くし、IE8以下は セレクタ:: を解釈しないらしい
  • inputやimgのような部品には使用できない
  • ::selectionはfirefox用に::-moz-selectionのようにベンダープレフィックスが必要

擬似クラス

指定したセレクタの全体に対して適用される

セレクタ 対象
:link 未訪問リンク
:visited 訪問済みリンク
:hover マウスホバーしたとき
:active リンクを押してから離すまでの間の状態
:focus 対象にフォーカスしたとき
:first(last)-child 最初(最後)
:nth-(last-)child(X) 最初(最後)からX番目
:nth-(last-)child(n+X) 最初(最後)から数えてX番目から最後(最初)まで
:nth-(last-)child(-n+X) 最初(最後)からX番目まで
:nth-(last-)child(Xn) 最初(最後)からXの倍数
:nth-child(odd) 奇数
:nth-child(even) 偶数
:only-child 子要素が1つだけのセレクタに対して
:lang(lang-code) lang属性で指定されたテキストに対して適用
:target アンカーリンク先に対して有効
:root 最上位の親要素(html)に対して
:not() 否定
:empty 子要素が空のもの
:enabled 有効なinputに適用
:disabled 無効なinputに適用
:checked checkedがついているinputに対して
  • aリンクに関する擬似クラスは順番通りに指定しないと機能しない
    英語圏では LOVE and HATE で LVHA で覚えるらしい(強引すぎて普通に覚え辛い)
  • nthはn番目の意味(first, fourth, fifth, sixth...みたいな)
  • XXX-child は親要素から兄弟要素を含み子要素全てをカウントする
  • XXX-of-type は親要素内のセレクタの型(type)を見て子要素をカウントする
  • :emptyはテキストや改行、半角スペースがあると適用されない(コメントアウトは可)

:targetは初めて聞いた。すごい。使えそう
多分知らなければjQueryでやってたな...

:rootはどこで使用するんだろう
CSS変数の宣言をするためのセレクタなのかな
htmlでよくないか？

擬似クラスはphpとかのif文に近い気がする

補足

擬似要素と擬似クラスを同時に使いたいときは擬似クラスが先に来るように記述する

セレクタ:擬似クラス::擬似要素

 

 

*1:CSS3の仕様からは外れているらしい