Topics

Rolling Your Own Tags

• <div> (block level) and <span> (inline)
  • class attribute (appearance)
  • id attribute (layout)

CSS Selectors

• Selectors
  • Universal selector
    • syntax: *
    • implicit syntax:  
    • use: CSS reset; in combination with another selector
  • Element type selector
    • syntax: name of HTML tag
    • use: change properties of the tag throughout document
  • Class selector
    • syntax: tag.identifier
    • tag can be universal, explicit or implicit
    • can have multiple .identifiers
    • use: change properties of tags with class set to identifier
  • ID selector
    • syntax: tag#identifier
    • tag can be universal, explicit or implicit
    • use: change properties of tag (singular!) with id set to identifier
  • Attribute selector (and CSS3 attribute selector)
    • syntax: tag[identifier]
    • syntax: tag[identifier="value"]
    • tag can be universal, explicit or implicit
    • use: change properties of tags with identifier attribute (set to value)
    • instead of =:
      • |= for prefix match of hyphenated value (what?!)
      • ~= for match in list of space-separated words
      • ^= for prefix match (CSS3)
      • $= for suffix match (CSS3)
      • *= for substring match (CSS3)

Grouping and Combining CSS Selectors

• Selector grouping
  • syntax: comma-separated list of selectors
  • use: logical OR
• Combinators
  • Descendant selector
    • syntax: whitespace-separated list of selectors
    • use: use as a path in the DOM, format those nodes as specified
    • note: descendant, not chlid
  • Child selector
    • syntax: parent>child
    • use: use as a path in DOM, format those nodes as specified
    • note: child
  • Adjacent sibling selector
    • syntax: selector+sibling
    • use: use as a path in DOM, format those nodes as specified
    • note: "adjacent sibling" means "same parent" and "immediately following"
  • General sibling selector
    • syntax: selector~sibling
    • use: use as a path in DOM, format those nodes as specified
    • note: "general sibling" means "same parent" and "all following"
  • Pseudoclasses
    • syntax: selector:pseudoclass (can be chained)
    • use: format selected elements with the specified pseudoclass
    • examples: :link, :visited (for <a>)
    • examples: :active, :hover, :focus, :lang, :first-child
    • CSS3 examples
    • gotcha: some psuedoclasses are mutually exclusive
    • gotcha: order matters!