Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ 絵 ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSSセレクタの組み合わせ

CSSセレクタの組み合わせ

ノート コンビネーションセレクタは、2つのセレクタとの間の直接的な関係を示しています。

CSSセレクタは、単純なセレクタの様々な組み合わせの組み合わせを含みます。

CSS3では、4つの組み合わせが含まれています。

  • （スペースで区切って）子孫セレクタ
  • 子要素セレクター（区切り付きより大きい）
  • 隣接兄弟セレクタ（プラス区切り）
  • （ダッシュで区切られた）通常の兄弟セレクタ

子孫ピッカー

子孫セレクタは、すべての要素に値する子孫要素にマッチします。

次の例では、<div>要素にすべての<p>要素を選択します。

例

div p
{
background-color:yellow;
}

»をお試しください

子供セレクタ

子孫のセレクター、サブセレクタ（子セレクタ）と比較要素の子要素として要素を選択することができます。

次の例では、すべての直接の子要素の<div>要素を選択し、<P>：

例

div>p
{
background-color:yellow;
}

»をお試しください

隣接兄弟セレクタ

隣接兄弟セレクタ（隣接兄弟セレクタ）直ちに要素の後に別の要素を選択し、両方が同じ親要素を持っています。

あなたは要素の直後に別の要素を選択する必要があり、両方が同じ親要素を持っている場合は、隣接兄弟セレクタ（隣接兄弟セレクタ）を使用することができます。

次の例では、<p>要素の後、<div>要素内のすべての最初のものを選択します。

例

div+p
{
background-color:yellow;
}

»をお試しください

通常の隣接兄弟セレクタ

指定された兄弟のすべての要素を選択するための共通の隣接兄弟セレクタ。

次の例では、すべての隣接兄弟<P>のすべての<div>要素を選択します：

例

div~p
{
background-color:yellow;
}

»をお試しください