CSS selectors

• CSS changes style of HTML
  • HTML tags were formerly used for changing the presentation (e.g. <center>)
  • CSS lets us say, “make the h3 tag green and have a bigger font”
  • tags are styled by “selecting” them with selectors and then applying styles
• Selectors:
  • type selector
    • just the tag name without <> brackets

        p {
          text-decoration: underline;
        }
      

    • selector syntax:

        selector {
          property: value;
        }
      

    • multiple properties can apply to a single selector
  • descendent selector
    • selects tag only if they are children of another tag

      ul li {
        font-size: 24px;
      }
      

    • the left-most selector is the parent
  • pseudo selector
    • a modifier that can be added to a selector to select a tag only when a certain condition has occured

      a {
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
        color: darkred;
      }
      

    • can be used to narrow the amount of child-tags selected

      ol li:first-child {
        color: red;
      }