CSSで
などの特定の要素を選択します
要素を選択するには、要素セレクターを使用します。次のコードを実行して、
要素を選択できます。
<!DOCTYPE html> <html> <head> <style> p { color: blue; background-color: orange; } </style> </head> <body> <h1>Demo Website</h1> <h2>Learning</h2> <p>Tutorials on web dev, programming, database, networking, etc.</p> <p>Every tutorials has lessons with illustrations and figures.</p> </body> </html>
-
CSSを使用した子要素の選択
CSS子コンビネータは、親要素のすべての子要素を選択するために使用されます。 CSS子コンビネータの構文は次のとおりです。 セレクター{属性:/*値*/} CSS子孫コンビネータは、親要素のすべての子孫を選択するために使用されます CSS子孫コンビネータの構文は次のとおりです セレクターセレクター{属性:/*値*/} 例 次の例は、CSSの子と子孫のコンビネータを示しています。 * {text-align:center;ボーダー:10pxグルーブトマト;} ::first-line {box-shadow:inset 0 0 7px cornflowerblue;}
-
CSSで兄弟要素を選択する
最初のセレクターの直後にある要素を照合する場合は、隣接する兄弟セレクター(+)を使用します。ここでは、両方のセレクターが同じ親要素の子です。 CSS隣接兄弟コンビネータの構文は次のとおりです- Selector + Selector{ attribute: /*value*/ } 2番目に選択した要素の位置に関係なく、同じ親の兄弟を選択する場合は、CSSの一般的な兄弟コンビネータを使用します。 CSSの一般的な兄弟コンビネータの構文は次のとおりです- Selector ~ Selector{ attribute: /*value*/ }