CodePen Embed - CSS - selektory 0

Live
​x
 
<html>
  <head>
    <title>Selektor tagów</title>
  </head>
  <style>
    /* Jeżeli chcemy ostylować kilka tagów na raz, to wypisujemy je po przecinku.
    Tutaj tagi <h2>, <span> i <p> będą miały tekst w tym samym kolorze */
    h2,
    span,
    p {
      color: darkmagenta;
    }
  
    /* Tagi <article> oraz <section> zostaną ostylowane w ten sam sposób. */
    article,
    section {
      padding: 10px;
      margin: 10px;
      border: 1px solid black;
      width: 300px;
    }
​
    /* Kolorem zielonym pokolorujemy tylko te tagi <h2>, które znajdują się wewnątrz tagu <article>: */
    article h2 {
      color: green;
    }
    /* Kolorem czerwonym pokolorujemy tylko te tagi <span>, które znajdują się wewnątrz tagu <article>: */
    article span {
      color: red;
    }
    article p {
      color: blue;
    }
    /* Kolorem różowym pokolorujemy tylko te tagi <p>, które znajdują się wewnątrz tagu <div>, 
       który to z kolei znajduje się wewnątrz tagu <article>: */
    article div p {
      color: pink;
    }
    
    /* Tutaj tak jak wyżej, ale dla tagu <section> */
    section h2 {
      color: chocolate;
    }
    section span {
      color: brown;
    }
    section p {
      color: deeppink;
    }
  </style>
  <body>
    <article>
      <h2>Zawartość tagu <i>article</i></h2>
      <span>
        Tag <strong>span</strong> wewnątrz tagu <strong>article</strong>
      </span>
      <p>Tag <strong>p</strong> wewnątrz tagu <strong>article</strong></p>
      <div>
        <p>Tag <strong>p</strong> wewnątrz tagu <strong>div</strong></p>
      </div>
    </article>
    <section>
      <h2>Zawartość tagu <i>section</i></h2>
      <span>
        Tag <strong>span</strong> wewnątrz tagu <strong>section</strong>
      </span>
      <p>Tag <strong>p</strong> wewnątrz tagu <strong>section</strong></p>
      <p>Tag <strong>p</strong> wewnątrz tagu <strong>section</strong></p>
    </section>
    <!-- Tag <footer> nie został użyty w powyższych stylach CSS,
  więc tagi <h2>, <span> oraz <p> użyją pierwotnie zdefiniowanego koloru (tj. "darkmagenta") -->
    <footer>
      <h2>Zawartość tagu <i>footer</i></h2>
      <span>
        Tag <strong>span</strong> wewnątrz tagu <strong>footer</strong>
      </span>
      <p>Tag <strong>p</strong> wewnątrz tagu <strong>footer</strong></p>
    </footer>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.