CSS selectors - jaredgorski.org

Back to notes

CSS selectors

Keywords: css, style, front end
Date:
  • 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;
        }