Please enable JavaScript.

Coggle requires JavaScript to display documents.

3.4: More selectors - Coggle Diagram

- - - - all password inputs
    - - all <a> elements with a title attribute
  - - - an anchor tag
        
        that has 'google' anywhere in the href
        
        a[href*="google"]{ color: #1d3557; }
      - only sections that are "most-popular"
        
        <section class="post most-popular">
        
        section[class*="most-popular"] { background-color: red; }
        
        :star: shorthand
        
        section.most-popular { background-color: red; }
        
        a class selector
- - - - that specify elements in a particular state
    - - IMPORTANT
      - :warning: however #
        
        most browsers don't care
        
        and you could use two
  - - - when you hover over them
        
        button:hover { background-color: #e63946; color: #faedcd; }
        
        will change colour
    - - .post button:hover { background-color: #e63946; color: #faedcd; }
- - - - that specify a particular subset of elements
    - - IMPORTANT
      - :warning: however
        
        most browsers don't care
        
        and you could just use one
  - - - h2::first-letter { font-size: 50px; }
      - make the first letter massive!
    - - ::first-letter { font-size: 50px; }