A Call For ::nth-everything | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it’s siblings. :first-child :last-child :nth-child :nth-last-child :first-of-type :last-of-type :nt
HTML5 Forms: CSS — SitePoint
In the second article of this three-part series about HTML5 forms, we’re going to look at styling or — more specifically — the pseudo-class selectors you can use to target input fields in various states. If you haven’t read it already, please refer to part one to ensure you understand the basic markup concepts. Remove Default Styling You’ve probably noticed browsers applying default formatting. Fo
CSS Diner
No worries, you've got this! You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all <p> elements) and applies the margin-bottom style. To play, type in a CSS selector in the editor below to select the correct items on the table.If you get it right, you'll advance
Demystifing Nth-Child in CSS - Demo
Nth-Child Visual Calculator Nth Selector even odd 1n+1 2n+2 3n+3 4n+4 5n+5 Submit Reset List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item List Item Li
はてなブログのトップページで記事のヘッダー情報以外を隠す - CHROMA
はじめに 僕は割と長めの記事を書くことがあり、これが続いた時にトップページがやたらと長くなるのが気になっていました。また、はてなブログのデザインを自分で変更してみたかったのですが、トップページで記事を全表示されていては考えられるデザインの幅が制限される気がしました。 まぁ、こんな理由からヘッダー情報以外を隠すということをやりました。 ( タイトルと記事につけたカテゴリーだけでは記事の内容が把握しずらいので、本文最初から数段落は出したほうがいいかも ) スタイルは html[itemtype="http://schema.org/ { ページ情報 } "] のように html に指定されている属性を使用して適用させました。 属性セレクタで各ページに指定するパターン 属性セレクタで指定していますので、IE7 以上、他のブラウザでも適用されるかと ( 表示確認していません ) 。 トップページで
内包要素の数が変動しても僕には擬似クラスと間接セレクタがある - dskd
公開日2013-12-04タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ４日目のエントリです。 昨日、げこたんさんに BEM Advent Calendar を手伝ってもらったら、 おや？プロパティの方に恩返しがありませんね？ — げこたん (@GeckoTang) 2013, 12月 2 と言われてしまったので２回目を登録しました。 要件 「データがある時はリンクを出したい」などのニーズで内包要素の数がページによって増えたり減ったりすること、けっこうありますよね。それが普通のテキストリンクではなくタブだとかサムネだとかでレイアウトにも関わるとき、要素の数によってスタイルを切り分けなきゃいけないわけですが、タブが２つの時には .tabs2。５つの時には .tabs5 とかいちいちクラス付与させるのも面倒くさいわけです。 どういう
接頭辞つきのクラス名にマッチする CSS セレクター
Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
