OIM3690 - Web Technologies

contain

Advanced CSS Selectors

Basic CSS Selectors

  • Type selectors: li {color:red}
  • Class selectors: li.spacious {margin: 20px}
  • ID selectors: #bordered {border:1px black solid}
  • Universal selectors: * {color :green}
  • Attribute selectors:
    • a[href="https://www.google.com"] {font-size: 2em}
    • more on syntax
  • Combine selectors into a selector list, using ,
    h1, .special { 
      color: blue; 
    } 
    

Adjacent sibling combinator

  • Siblings
  • Syntax: +
    /* Paragraphs that come immediately after any h1 */
    h1+p {
      color: red;
    }
    

General sibling combinator

  • Siblings
  • Syntax: ~
    /* all <h2> elements that are siblings of and subsequent to any h1 */
    h1~h2 {
      color: red;
    }
    

Child combinator

  • Parent and child
  • Syntax: >
    /* List items that are children of the "my-things" list */
    ul.my-things>li {
      color: red;
    }
    

Descendant combinator

  • Ancestor and descendant
  • Syntax: ``(a single space)
    /* List items that are descendants of any <div> */
    div li {
      color: red;
    }
    

Pseudo-elements ::

  • Pseudo-element selectors select a certain part of an element rather than the element itself.
  • Examples:
    /* Selects the first lines of any <p> */
    p::first-line {color: red;}
    
    /* Selects the first letters of any <p> */
    p::first-letter {font-size: 2em;}
    
  • See more examples

Pseudo-classes :

  • Pseudo-classes style certain states of an element.
  • Examples:
    /* Selects any <p> that is the last element among its siblings */
    p:last-child {
      color: lime;
      }
    /* Selects the second <li> element in any list */
    li:nth-child(2) { 
      color: lime;
      }
    
  • See more examples

Link styles

  • a:link (applies to normal links)
  • a:visited (applies to visited links)
  • a:hover (affects a link when cursor is placed above it)
  • a:active (applies to active links)

Exercise

  • Play with all the selectors on w3schools.
  • Try some advanced selectors in any of your old files.
    • e.g., in ex05.html, can you use smiley.gif as bullet markers for courses only?
  • Play CSS Diner.

Questions?

global styles