HTML5とCSS3の辞典[やさしいタグ入門辞書]

  • a
  • a
  • a

HTML5とCSS3の辞典　＞　属性一致　＞　要素[属性&="終了文字列"]

要素[属性&="終了文字列"]

属性の開始文字が一致する。

a[href&=".jpg"] {
color: red;
}

<ul>
<li><a href="http://yahoo.co.jp/">Yahoo!JAPAN</a></li>
<li><a href="./samples/sample_02.jpg">仙台のイルミネーション</a></li>
<li><a href="http://google.co.jp/">Google</a></li>
<li><a href="./samples/sample.mp4">サンプル動画</a></li>
</ul>
  • Yahoo!JAPAN
  • 仙台のイルミネーション
  • Google
  • サンプル動画
属性のファイル名やリンク先等の、終了文字を特定しスタイルを適用します。
同じ拡張子などを識別して表示を一括で管理できることで作業効率が上がります。

  • 基本要素
    • html（ルート）
    • head（HTML情報）
    • body（本文）
    • title（タイトル）
    • meta（メタ情報）
    • base（基準URL）
    • link（外部ファイル）
    • style（CSS）
    • script（スクリプト）
  • セクション
    • section（セクション）
    • article（完結セクション）
    • aside（メイン外セクション）
    • nav（ナビセクション）
    • header（ヘッダ）
    • footer（フッタ）
  • 見出し
    • h1～h6（見出し）
    • hgroup（見出しグループ）
  • グループ
    • div（汎用ブロック）
    • span（汎用要素）
    • p（段落）
    • ul（リスト）
    • ol（番号リスト）
    • dl（用語リスト）
    • blockquote（引用文）
    • pre（整形テキスト）
    • figre（図画）
    • hr（ライン）
  • テキスト
    • a（リンク）
    • q（引用フレーズ）
    • cite（引用元URL）
    • dfn（定義対象）
    • abbr（略語）
    • time（時間）
    • adress（住所）
    • strong（重要性高い強調）
    • em（強調）
    • mark（ハイライト）
    • small（小さめ文字）
    • b（太文字）
    • i（イタリック文字）
    • sup（上付き文字）
    • sub（下付き文字）
    • code（コード文字列）
    • samp（PC出力文字）
    • kbd（ユーザー入力文字）
    • br（改行）
    • wbr（改行可能位置）
    • bdo（文字表記方向）
    • ruby（ルビを振る）
    • ins（追加テキスト）
    • del（削除テキスト）
  • コンテンツの組み込み
    • img（画像）
    • audio（音声）
    • video（動画）
    • map（イメージマップ）
    • object（汎用組込み）
    • iframe（インラインフレーム）
  • テーブル
    • table（テーブル関連）
  • フォーム
    • form（フォーム）
    • input（入力・選択）
    • textarea（テキストエリア）
    • select（セレクトメニュー）
    • datalist（入力候補選択肢）
    • fieldset（部品のグループ化）
    • label（部品項目名）
    • output（計算結果）
    • keygen（公開鍵生成）
    • progress（プログレスバー）
    • meter（メーター）
  • インタラクティブ
    • details（クリック開閉）
    • menu（命令メニュー）
    • command（命令コマンド）
アンダータグ
  • 属性一致
    • 要素[属性^="開始文字"]
    • 要素[属性$="終了文字"]
    • 要素[属性*="含む文字"]
  • 擬似クラス
    • 要素:root（ルート指定）
    • 要素:nth-child（一定おき）
    • 要素:nth-of-type（一定おき）
    • 要素:nth-last-child（後から一定おき）
    • 要素:first-of-type（最初の同一要素）
    • 要素:last-of-type（最後の同一要素）
    • 要素:last-child（最後の要素）
    • 要素:only-child（唯一の子要素）
    • 要素:only-of-type（一つの子要素）
    • 要素:empty（子要素なし要素）
    • 要素:target（ターゲット先要素）
    • 要素:disabled（disabled属性の要素）
    • 要素:enabled（disabled属性でない要素）
    • 要素:checked（checked属性の要素）
    • 要素:not（該当しない要素）
  • 擬似要素
    • 要素::first-line（最初の行）
    • 要素::first-letter（最初の文字）
    • 要素::before（直前に文字を挿入）
    • 要素::after（直後に文字を挿入）
    • 要素::selection（選択範囲）
  • 色・透明化
    • rgba（RGB色指定と透明化）
    • hsla（HSL色指定と透明化）
    • liner-gradient（グラデーション）
    • opacity（透明度）
  • メディア
    • メディア分岐
  • 背景
    • background（背景複数指定）
    • background-clip（線と背景の関係）
    • background-origin（背景の開始位置）
    • background-size（背景のサイズ）
  • テキスト
    • font-face（WEBフォント）
    • text-shadow（テキストに影）
    • text-overflow（超過文字の処理）
    • word-wrap（自動改行）
  • ボーダー
    • border-radius（角丸の指定）
  • ボックス
    • box-shadow（ボックスに影）
    • box-sizing（幅にボーダーを含むか）
    • outline-offset（アウトラインの間）
    • resize（コメント欄の幅を調節）
  • カラムレイアウト
    • column-count（カラムの数を指定）
    • column-width（各カラムの横幅）
    • column-gap（カラムとカラムの間隔）
    • column-rule-color（カラム境界線の色）
    • column-rule-style（カラムの境界線の線種）
    • column-rule-width（カラムの境界線の幅）
    • column-rule（カラムの一括指定）
  • ボックスの並び
    • display（ボックスにする）
    • box-orient（ボックスの並べ方）
    • box-direction（ボックスを逆から並べる）
    • box-original-goup（各ボックスの並び）
    • box-align（ボックスの縦揃え）
    • box-pack（ボックスの横揃え）
    • box-flex（各ボックスの比率）
  • 移動・回転・拡大・縮小
    • transform（ブロックの変化）
    • transform-origin（ブロックの標準点）
  • 動的な変化
    • transition-property（スムーズに変化）
    • transition-duration（変化する時間）
    • transition-timing-function（速度の変化）
    • transition-delay（変化開始）
    • transition（変化の一括指定）
  • アニメーション
    • animation-name（アニメの名前）
    • animation-duration（遅れて再生）
    • animation-timing-function（変化方法）
    • animation-interation-count（速度の変化）
    • animation-direction（逆から再生）
    • animation-delay（遅れて再生）
    • animation（アニメの一括指定）
アンダータグ
Copyright © 2012 Hikaru Koishi. All Rights Reserved.

Thanks you guys for this site was born. Thank you.
Asakura MH, Dr.Sato, Ns.Harano, Ns.Kumano, Rico, 69x, B'z, my Fammiry and my Friends.