CSS Selectors you probably don’t know⁣⁣

0
1951
css selectors
css selectors
  • did you know that you can select the first letter with CSS?
    p:first-letter {⁣⁣ 
      color:red;
    ⁣⁣}⁣⁣⁣⁣
  • or the first line of text:⁣⁣
    p:first-line {⁣⁣ 
      color:red;
    ⁣⁣}⁣⁣⁣⁣
  • That you can select all direct p tags of the body tag:
    ⁣⁣body > p {⁣⁣ 
      background-color: blue;
    ⁣⁣}⁣⁣⁣⁣
  • Select the p sibling immediately following the h1 tag:⁣⁣
    h1 + p {⁣⁣ 
      background-color: blue;
    ⁣⁣}⁣⁣
  • You can select the first child with the pseudo element.
    tr:first-child { 
      background-color: red;
    }
  • You can select the last child with the pseudo element.
    tr:last-child { 
      background-color: blue;
    }
  • You can also style a radio button that is checked!
    input[type="radio"]:checked { 
      box-shadow: 0 0 0 3px orange;
    }
  • You can also style a radio button that is not checked!
    input[type="radio"]:not(:checked) { 
      box-shadow: 0 0 0 3px orange;
    }
  • You can do the same with a checkbox
    input[type="checkbox"]:checked { 
      box-shadow: 0 0 0 3px hotpink;
    }
  • or with an option element
    option:checked { 
      box-shadow: 0 0 0 3px lime;
    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here