別の CSS クラス内の CSS クラスをターゲットにする方法

」。次に、さらに使用するためにクラス属性を割り当てます。

ステップ 2: ネストされた「div」コンテナを作成する

次に、ステップ 1 と同じ手順に従って、ネストされた div コンテナーを作成します。

< 分周 クラス = 'メインコンテンツ' >

< 分周 クラス = 'テーブル' >

< 分周 クラス = '行' >

< 分周 クラス = 'c-左' > 結婚する < / 分周 >

< 分周 クラス = 「c-右」 > ジャック < / 分周 >

< 分周 クラス = 'c-左' > トム < / 分周 >

< 分周 クラス = 「c-右」 > 7月 < / 分周 >

< / 分周 >

< / 分周 >

< / 分周 >

出力

---

---

ステップ 3: メインの「div」コンテナにスタイリングを適用する

メインの「 分周 ” クラス名の助けを借りたコンテナ “ 。メインコンテンツ 」：

。メインコンテンツ {

幅 : 40% ;

マージン : 0 自動 ;

色 : 青 ;

国境 : 2px 点在 青 ;

テキスト整列 : 中心 ;

}

ここ：

• 「 幅 」は要素の幅サイズを指定します。
• 「 マージン 」は、定義された境界線の外側の要素の周りにスペースを割り当てます。
• 「 色 」は、要素に追加されたテキストの色を定義します。
• 「 国境 」は、HTML の要素の周囲のアウトラインまたは境界を定義します。
• 「 テキスト揃え 」は、要素のテキストの配置を定義します。

ステップ 4: 別のクラスのスタイルを設定する

名前を使用して、CSS メイン クラスおよびその他のネストされたクラスにアクセスします。次に、選択に従って値を指定して、コンテナーの幅を設定します。

。メインコンテンツ 。テーブル {

幅 : 80% ;

}

さらに、上記と同じ手順に従って他のクラスにアクセスし、以下のコード スニペットに記載されている CSS プロパティを適用します。

。メインコンテンツ .c-右 {

画面 : インラインブロック ;

フォントサイズ : 20px ;

}

上記のコード スニペットによると、次のようになります。

• 「 画面 」プロパティは、要素の表示を設定するために使用されます。
• 「 フォントサイズ 」は、コンテナに追加されるテキストのサイズを指定します。

次に、同じメソッドを利用して他のクラスにアクセスし、以下に示すように次の CSS プロパティを適用します。

。メインコンテンツ .c-左 {

幅 : 140px ;

右マージン : 6px ;

フォントサイズ : 16px ;

}

そのために、「 幅 」、「 右マージン ' と ' フォントサイズ スタイリング目的で。

さらに、メインの「 分周 クラス名を使用して他のネストされた div コンテナーに沿ってコンテナーを配置し、次の CSS プロパティを適用します。

。主要 .c-右 {

幅 : 自動 ;

フォントサイズ : 15px ;

色 : #fff ;

右マージン : 20px ;

フォントの太さ : 普通 ;

}

出力

これで、別の CSS クラス内の CSS クラスをターゲットにすることができました。

結論

別の CSS クラス内の CSS クラスをターゲットにするには、まず、メインの「 分周 」割り当てられたクラス属性を介して。次に、同じ手順で別の「div」コンテナにアクセスします。さらに、ユーザーは他の CSS クラス内の CSS クラスをターゲットにすることができます。この投稿では、別の CSS クラス内の CSS クラスをターゲットにする方法を示しました。