[B! first-child] oreskboysのブックマーク

oreskboys id:oreskboys

first-childに関するoreskboysのブックマーク (3)

【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。
対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。図にするとこのような感じ。直属の親要素が異なると、別グループになります。また、グループ内の要素の種類は一種類に限りません。「:(hoge)-child」は並び順→要素、「:(hoge)-type」は要素→並び順ポイントはここ。 :(hoge)-child系と:(hoge)-type系では、並び順と要素の判定順が逆になります。 :(hoge)-child系はまず並び順を見て、次にそれが要素と一致するかを見ます。 :(hoge)-type系は指定の要素だけにしぼって、その上で並び順を見ます。最後のdt、1つ目のddにスタイルがあたらなくて困った場合、 dt:last-child {
oreskboys 2015/03/05
first-child first-of-typeの違

first-child

疑似クラス
リンク
2/5 CSSの「疑似クラス」の書き方再入門（CSS3対応版） [ホームページ作成] All About
CSSの「疑似クラス」の書き方再入門（CSS3対応版）(2ページ目)スタイルの適用先を指定する「セレクタ」には、「疑似クラス」という特殊な書き方も用意されています。要素名やclass名を指定するだけでは実現できない特殊な状態に限定してスタイルを変化させるなど、様々な装飾ができます。 :first-child疑似クラス (CSS2) 要素αが、親要素の内部で「最初の子要素として登場する場合」のみを対象にしてスタイルを適用します。 α:first-child { プロパティ: 値; } 例えば、HTMLが以下のように記述されている場合を考えます。ここでは、ul要素とli要素を使ってリストを作成しており、項目数（li要素数）は5つあります。 <ul> <li>第1項目</li> ：　：　： <li>第5項目</li> </ul> このとき、次のようにCSSを記述すると、 /* ▼全li要素が対
oreskboys 2014/05/20
疑似クラス

first-child

last-child

last-of-type
リンク
margin-top派かmargin-bottom派で言えば、margin-top派です - あと味
世の中にはmargin-top派とmargin-bottom派がいるとかいないとか。自分はmargin-top派です。 margin-left派とmargin-right派がいるならば、margin-left派です。試しにmargin-bottom派になってみようかなと頑張ってみたんですけど、やはり慣れもあり、margin-topの方がしっくりきたのでエントリーを起こすことにしました。 margin-top派な理由 margin-top派になったのには理由はなくて、なんとなくmargin-top派になった気がするのですが、margin-bottom派に移るのが少し面倒な理由はあります。その理由は:first-child擬似クラスの存在です。例1 例えば、以下の様なHTMLがあったとします。各section.contentの間には30pxの余白が欲しかったとします。 <section
oreskboys 2014/02/07
child

first-child

last-child

css3

html5
リンク
1