:first-lineと:first-letterはブロックレベル要素を対象とした擬似要素です。使い方は次の通りです。 要素名:first-line { プロパティ: 値; } 要素名:first-letter { プロパティ: 値; } ※:first-line擬似要素と:first-letter要素はIEでは対応していますがIE6では未サポートです。 :first-line擬似要素は要素の先頭の1行目に適用され、:first-letter擬似要素は要素の先頭の文字に適用されます。先頭の文字は先頭の行に含まれるため、二つの擬似要素で同じプロパティに対して違う値を設定している場合、:first-letter擬似要素で設定した値が有効となります。 例えば次のように使用します。 p:first-line { color: #ff0000; } p:first-letter { font-siz
でっかい括りにcssを適用してると、「ほげっ！なんじゃ、このボーダー！」ってことよくあります。 .side_bar img {border:1px solid #ccc;} リセットcssとか使って初めから全体のimgにborder:noneしつつも、どっか大きいとこに一括指定をしてたりします。 んで、サイドバーにウィジェットとか追加してそこのイメージにはボーダーいらんとなると、 .side_bar img { border: 1px solid #ccc; } .side_bar .widget img { border:none; }ボーダーを打ち消すcssを書かんとなりません。 しかも他のウィジェットも同じクラス名でimgにボーダーが要るとすると事態は一層の混乱を深めます。 消して、付けて、いらんもの付けて、消すのです。 どうも納得がいかん。 否定擬似クラスぅ？ :notとかいう否定
UI要素状態擬似クラス (E:enabled, E:disabled)｜セレクタ｜CSS HappyLife ZERO
UI要素状態擬似クラス (E:enabled, E:disabled) 最終更新：2009年7月 7日 13:08 CSS3で定義された、UI要素状態擬似クラスのパターンE:enabled, E:disabledは、 有効または無効にしている時にスタイルが適用されるセレクタです。 例えば、プログラムなど何らかの理由でtextarea要素が入力できない状態（無効）になっている時は、E:disabledが適用され、有効にする条件を満たしたりして入力できる状態（有効）になった場合は、E:enabledが適用されます。 対応ブラウザ UI要素状態擬似クラスのサンプル textarea:disabled { background: #666; } textarea:enabled { background: #fff; } <p> <textarea rows="3" cols="30"></tex
前回の「IE6で:hover擬似クラスを適用するためのCSS」にちょっと手を入れただけの内容ですが、focus擬似クラスはIE7でも動作しないのでこちらはアンダースコアハックにしてあります。 hover程の必要性が出てくるケースはないと思いますが、せっかく作ったので一応公開しておきます。 .target-element { _behavior: expression( (function(el) { if(typeof(behavior_onFocusIn) == 'undefined') { behavior_onFocusIn = function() { this.className += ' target-focus'; }; behavior_onFocusOut = function() { this.className = this.className.replace(/ta
カスタム要素の状態を定義する CustomStateSet と参照する擬似クラス :state() Safari 17.4 で CustomStateSet がサポートされた。CustomStateSet は Web Components のカスタム要素の状態を管理する API で、Element Internals の states プロパティに含まれる。Element Internals はカスタム要素の振る舞いを HTML のフォームと連動させるための仕様だ。 CustomStateSet は JavaScript のグローバルオブジェクトである Set と同様のインターフェースで、CustomStateSet に追加された文字列がカスタム要素の「状態」を定義する。 次のデモは HTML の minlength 属性を <input type="number"> で動的に設定し振る舞
CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CSS も冗長になって美しくありません。nth-child が全てを解決してくれます。例として以下を御覧ください。 りんご みかん ぶどう この2行目のみかんのみ文字色を変えたいという場合は css で nth-child を指定します。 ul li:nth-child(2){ color:#f00; } nth-child(2) でリストの2番目を指定するという意味になります。 前置きはこのくらいにして、ここからが本題です。このような便利な nth-child ですが、div 要素に nth-child を指定した時に詰まりました。 クラス名の違うdivが連なる場合 このよう
CSS の擬似クラスと擬似要素 : (*x).b=z->a+y/c
クラス xx に ::after を指定した場合はこの位置にあります 要素の内側というところと content プロパティ必須なのに注意です 文字がいらないなら content プロパティに空文字設定です ::before基本は ::after と一緒ですが 要素の場所は内側の最初になります content 必須なのと内側になるのは一緒です あまり先とか後を気にせず position:absolute; をつけてデザイン用に使うことが多いです ::first-letter最初の一文字にマッチします 最初の一文字を大きくしたり 左にマージンつけて 段落開始の一文字あけるとかできます "「あ" とか "あ、" みたいな場合は 一文字じゃなく 2 文字になります ::first-line最初の行にマッチします inline 要素には使えないので注意 ::selection選択した範囲にマッチしま
擬似要素::beforeで要素の前に任意の文字を追加で表示できます。 ::afterで要素の後ろに任意の文字を追加で表示できます。 data-＝””を使うと、HTMLに独自の属性がつけられて、擬似要素で使えます。 VSCodeブラウザ擬似クラス:hover:hoverを使うと、マウスカーソルを当てた時の状態を設定できます。 VSCodeブラウザ擬似クラス:nth-childnth-childを使うと、同じ要素の特定位置にスタイルをつけられます。 値に、数字とnを組み合わせると、一定間隔でスタイルをつけられます。 値に、oddを入れると、奇数番目にスタイルをつけられます。 値に、evenを入れると、偶数番目にスタイルをつけられます。 first-childを使うと、要素の最初にスタイルをつけられます。 last-childを使うと、要素の最後にスタイルをつけられます。
:not()｜CSSで「〜以外」を指定する擬似クラス
2019年10月17日(木) HTML入門 Web HTML css :not()｜CSSで「〜以外」を指定する擬似クラス 擬似クラス『:not()』は、引数に指定したセレクタ以外の要素を表します。 下記は、p要素以外の要素を指定します。
1.DummyText 2.DummyText 3.DummyText 4.DummyText 5.DummyText 見やすいように少しだけCSSをいじっていますが、至ってシンプルなリストです。
あまり日の目を見ないかわいそうな:focus擬似クラス
CSSには:focus擬似クラスというものがあります。ちょっと前ですとフォーカスされているフォームコントロールの見栄えを指定するネタがにぎわったので覚えている方も多いことでしょう。例えばこんな感じです。「フォーカスのあるフォームの装飾を変化させる – スタイルシートTIPS ふぁくとりー」。 さて、:focus擬似クラスはinput要素だけに指定するためのものではないんですよね。ページを閲覧している方が、何かの要素にフォーカスを合わせている状態の装飾を行うことが可能です。例えば、a要素には必ず:hover擬似クラスを指定して、リンク項目にカーソルがあたったことを分かりやすくするようにしている、という方も多いでしょう。そんな方は、必ず:focus擬似クラスもセットで指定してみてはいかがでしょうか？ :hover擬似クラスと:focus擬似クラスをセットで指定することで、キーボードのみでページ
:target擬似クラスのまとめ
CSSの「:target擬似クラス」について調べてみました。 認識誤りがありましたらどこかでつぶやいてください。 １．:target擬似クラスとは :target擬似クラスはCSS3で追加されたセレクタです。 以下、とりあえず仕様の記載をもとに記します。 仕様は下記のリンク先にあります。 Selectors Level 3 - 6.6.2. The target pseudo-class :target フラグメント識別子（#）のついたURIは、同じHTML文書内の特定の要素にリンクされることがあり、これを「ターゲット要素」と呼びます。 次の例は、HTML文書内にあるfooと名付けられた要素を参照するURIです。 http://user-domain/index.html#foo ターゲット要素は:target擬似クラスで表すことができます。 URIがフラグメント識別子を持たない場合、その
やり方 Elementsパネルで擬似クラスを付けたい要素を右クリック Force Element Psuedo States → [:avtive, :hover, :focus, :visited] から選択 もしくは 要素を選択 Stylesパネルの右上、+の横の矢印をクリック [:avtive, :hover, :focus, :visited] から選択 擬似クラスをつけた要素はElementsパネルに目印としてオレンジ色の●がつきます。 だいぶ前からあった機能なのに最近知って震えてる:;(∩´﹏`∩);: Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informati
擬似クラス (pseudo class) 擬似クラスとは、特定の性質に適用できるセレクタです。 擬似クラスは、style属性 (インラインCSS) では指定できません。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
:first-line、:first-letter擬似要素 - 擬似クラスと擬似要素 - スタイルシート入門
CSS3 擬似クラス:notで無駄っぽい上書きを減らす
IEで:focus擬似クラスを適用するためのCSS : ずっと工事中
カスタム要素の状態を定義する CustomStateSet と参照する擬似クラス :state()
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない
CSSの擬似要素や擬似クラスをみてみよう!（::before、::after、:hover、nth-child)
【CSS】最初、最後、奇数、偶数、n番目など、リストの装飾でよく使う擬似クラスまとめ
CSSの擬似クラス:link, :visited, :hover, :active, :focusの使い方
擬似クラスのスタイルを確認するのに便利な機能 - Qiita
擬似クラス | CSS解説