CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでセレクターをグループ化する

CSSグループ化セレクターは、複数の要素を選択し、それらを一緒にスタイル設定するために使用されます。これにより、各要素に共通のスタイルを宣言するためのコードと余分な労力が削減されます。セレクターをグループ化するには、各セレクターをスペースで区切ります。

構文

CSSグループ化セレクターの構文は次のとおりです-

element, element {
   /*declarations*/
}

次の例は、CSSグループ化セレクター-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
article, p, img {
   display: block;
   margin: auto;
   text-align: center;
   border-bottom: double orange;
}
</style>
</head>
<body>
<article>Demo Text</article>
<p>This is demo text.</p>
<br/>
<img src="https://www.tutorialspoint.com/swing/images/swing.jpg">
</body>
</html>

出力

これにより、次の出力が得られます-

CSSでセレクターをグループ化する

例

<!DOCTYPE html>
<html>
<head>
<style>
div::after,p::after{
   content: "Demo text";
   margin: 4px;
   box-shadow: inset 0 0 4px darkorange;
}
</style>
</head>
<body>
<div></div>
<p>This is example text.</p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSでセレクターをグループ化する


  1. 要素のスタイル設定にCSSセレクターを使用するにはどうすればよいですか？

    CSSセレクターを使用すると、好みに基づいて目的の要素を具体的にスタイル設定できます。 HTMLDOMの要素を選択するにはさまざまな方法があります。 構文 CSSセレクターの構文は次のとおりです- Selector {    /*declarations*/ } 次の例は、スタイリング要素のCSSセレクターを示しています- 例 <!DOCTYPE html> <html> <head> <style> #one {    filter: invert(85%); } </style> <

  2. CSSの高度なセレクター

    CSSのAdvancedSelectorsには、隣接兄弟セレクター、属性セレクター、直接子セレクター、n番目のタイプセレクターなどが含まれます。また、GeneralSiblingSelectorも含まれます。例を以下に示します。 h1 ~ h3 直接子セレクターの例- div > span 以下は、CSSの高度なセレクターを示すコードです- 例 <html> <head> <style> #red {    color: red; } .green {    background: green; } ul:n