CSS Selectors Reviewed

This is a part of a Dev.to post on CSS Selectors

by soawillb

HTML

<!-- TYPE SELECTOR -->
<!-- <div class="example-code">
  <custom>Custom element</custom>
  <p>Paragraph</p>
</div> -->

<!-- CLASS SELECTOR -->
<!-- <div class="example-code">
  <div class="bordered">
    Bordered element.
  </div>
</div> -->

<!-- ATTRIBUTE SELECTOR -->
<!-- <div class="example-code">
  <input type="text" name="name" placeholder="Your name" />
  <input type="number" name="age" placeholder="Your age" />
</div> -->

<!-- <div class="example-code">
  <button class="btn bordered">Click Here</button>
</div> -->

<!-- <div class="example-code">
  <button class="primary-btn">Click Here</button>
  <p class="primary">Paragraph</p>
</div> -->

<!-- <div class="example-code">
  <button class="caller">Caller</button>
  <button class="called">Called</button>
  <button class="calling">Calling</button>
</div> -->

<!-- <div class="example-code">
  <div class="required">
    <p>Required</p>
  </div>
  <div class="validated">
    <p>Validated</p>
  </div>
</div>
 -->
<!--  
 <div class="example-code">
  <button class="btn-primary">Click here</button>
 </div> -->
 
<!-- ID SELECTOR-->
<!-- <div class="example-code">
  <div>block with no ID</div>
  <div id="d123">block with ID of d123</div>
</div> -->

<!-- UNIVERSAL SELECTOR -->
<!-- <div class="example-code">
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>
      <span>Item 5</span>
    </li>
  </ul>
</div> -->

<!-- PSEUDO-CLASSES -->
<div class="example-code">
  <input type="text" name="email" />
  <textarea disabled></textarea>
  <a href="#">Click here</a>
  <p>Click and hold to keep applying active state style</p>
  <div class="empty"></div>
  <input type="email" />
  <input type="number" min="3" max="10" />
  <input type="checkbox" option="Check this" /> 
  <span>Check this</span>
  <div class="wrapper">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <span>Not a paragraph 1</span>
    <p>Paragraph 4</p>
   ...

CSS

/* SETUP */
.example-code {
  box-shadow: 0 0 5px grey;
  margin-top: 1rem;
  padding: .8rem 1rem;
}

/* -------------------------- */

/* TYPE SELECTOR */
/* custom {
  border: 1px solid black;
}
p {
  color: green;
} */

/* -------------------------- */

/* CLASS SELECTOR */
/* .bordered {
  border: 1px solid red;
} */

/* -------------------------- */

/* ATTRIBUTE SELECTOR */
/* [name] {
  background-color: green;
}

[name="age"] {
  background-color: red;
} */

/* [class~="bordered"] {
  border: 3px solid green;
} */

/* [class|="primary"] {
  color: green;
} */

/* [class^="call"] {
  color: green;
} */

/* [class$="ed"] {
  background-color: pink;
} */

/* [class*="prim"] {
  background-color: pink;
} */

/* -------------------------- */

/* ID SELECTOR */
/* #d123 {
  font-weight: bold;
} */

/* -------------------------- */

/* UNIVERSAL SELECTOR */
/* * {
  border: 1px solid yellow;
} */

/* -------------------------- */

/* PSEUDO-CLASSES */
input:focus, textarea:focus {
  background-color: black;
  color: white;
}

input:hover {
  background-color: yellow;
}

input:enabled {
  border: 3px solid black;
}

textarea:disabled {
  border: 5px solid pink;
}

a:active, p:active {
  background-color: green;
}

div.empty {
  width: 1rem;
  height: 1rem;
}

div:empty {
  background-color: red;
}

input:valid {
  background-color: green;
}

input:invalid {
  background-color: red;
}

input[type="checkbox"]:checked + span {
  background-color: green;
}

input[type="number"]:in-range {
  color: blue;
}

div.wrapper :not(p) {
  border: 1px solid gray;
}

div.wrapper p:first-child {
  color: red;
}

div.wrapper :first-of-type {
  font-size: 2rem;
}

div.wrapper :nth-child(2) {
  color: pink;
}

div.wrapper :nth-child(3n) {
  color: purple;
}

div.wrapper :only-of-type {
  background-color: black;
  color: white;
}

p:lang(br) {
  background-color: green;
  color: yellow;
}

 

/* -------------------------- */
 
/* PSEUDO ELEMENTS */
/* .surround::before {
  content:...