Live
x
<html> <head> <title>Kombinatory</title> <style> /* Wybieramy każdy tag <p> znajdujący się wewnątrz tagu <section>. Nie ma znaczenia czy jest rodzicem, dzieckiem, rodzeństwem - wybieramy każdy */ section p { text-decoration: underline; /* podkreślenie tekstu */ } /* Child combinator: ">" */ /* Wybieramy tylko te tagi <p>, które są dziećmi tagów <section>. */ section > p { color: red; } /* Wybieramy tylko te tagi <div>, które są dziećmi tagów <section>. */ section > div { color: blue; } /* Adjacent sibling combinator: "+" */ /* Wybieramy tylko te tagi <p>, które są bezpośrednim rodzeństwem tagów <h1> */ h1 + p { font-size: 22px; /* powiększenie tekstu */ } /* Wybieramy tylko te tagi <div>, które są bezpośrednim rodzeństwem tagów <p> */ p + div { border: 4px solid green; /* zielona ramka */ } /* General sibling combinator: "~" (znak tyldy) */ /* Wybieramy tylko te tagi <div>, które są bezpośrednim rodzeństwem tagów <p> */ p ~ div { background: lightpink; /* różowe tło */ } </style> </head> <body> <section> <h1>Nagłówek</h1> <p>Lorem ipsum text 1</p> <div> <p>Lorem ipsum text 2</p> <p>Lorem ipsum text 3</p> <p>Lorem ipsum text 4</p> </div> <div> <p>Lorem ipsum text 5</p> </div> <p>Lorem ipsum text 6</p> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.