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

CSSで兄弟要素を選択する

最初のセレクターの直後にある要素を照合する場合は、隣接する兄弟セレクター（+）を使用します。ここでは、両方のセレクターが同じ親要素の子です。

CSS隣接兄弟コンビネータの構文は次のとおりです-

Selector + Selector{
   attribute: /*value*/
}

2番目に選択した要素の位置に関係なく、同じ親の兄弟を選択する場合は、CSSの一般的な兄弟コンビネータを使用します。

CSSの一般的な兄弟コンビネータの構文は次のとおりです-

Selector ~ Selector{
   attribute: /*value*/
}

次の例は、CSS隣接および一般的な兄弟コンビネータプロパティを示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   display: flex;
   margin: 2%;
   padding: 2%;
   box-shadow: inset 0 0 24px cyan;
   justify-content: space-around;
}
div + p {
   font-size: 1.2em;
   font-weight: bold;
   background: powderblue;
}
section {
   box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSで兄弟要素を選択する

例

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   display: flex;
   margin: 2%;
   padding: 2%;
   background: thistle;
   justify-content: space-between;
}
section ~ p {
   text-align: center;
   font-size: 1.2em;
   font-weight: bold;
   background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Random text 1</p>
<section><p>Some text in section</p></section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSで兄弟要素を選択する


  1. CSSでレスポンシブフローティング要素を作成するにはどうすればよいですか？

    CSSを使用してレスポンシブフローティング要素を作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Ver

  2. CSSを使用した子要素の選択

    CSS子コンビネータは、親要素のすべての子要素を選択するために使用されます。 CSS子コンビネータの構文は次のとおりです。 セレクター{属性：/*値*/} CSS子孫コンビネータは、親要素のすべての子孫を選択するために使用されます CSS子孫コンビネータの構文は次のとおりです セレクターセレクター{属性：/*値*/} 例 次の例は、CSSの子と子孫のコンビネータを示しています。 * {text-align：center;ボーダー：10pxグルーブトマト;} ::first-line {box-shadow：inset 0 0 7px cornflowerblue;}