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

CSSの一般的な兄弟セレクター

CSSの一般的な兄弟セレクターは、最初の要素に続くすべての要素を選択して、両方が同じ親の子になるようにするために使用されます。

構文

CSSの一般的な兄弟セレクターの構文は次のとおりです

element ~ element {
   /*declarations*/
}

次の例は、CSSの一般的な兄弟セレクター-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   float: left;
   padding-left: 14px;
   list-style: none;
}
p ~ ul {
   box-shadow: inset 4px 0 3px lime;
}
</style>
</head>
<body>
<ul>
<li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li>
<li><img src="https://www.tutorialspoint.com/images/db2.png"></li>
<li><img src="https://www.tutorialspoint.com/images/sql.png"></li>
</ul>
</body>
</html>

出力

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

CSSの一般的な兄弟セレクター

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   float: left;
   padding: 10px;
   list-style: none;
}
img ~ p {
   background-color: burlywood;
}
</style>
</head>
<body>
<p>This is demo text.</p>
<img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>
</body>
</html>

出力

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

CSSの一般的な兄弟セレクター


  1. CSSを使用してレスポンシブ価格表を作成するにはどうすればよいですか？

    CSSを使用してレスポンシブ価格表を作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    * {       box-sizing: border-box;    }    body { &n

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

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