• Universal selector Applies to all elements in a document.  i.e. * {}
  • Type selector  Matches element name  i.e. h1, h2, h3 {}
  • Class selector Matches an element who class attributes has a value the same as after the . (or full stop) symbol. i.e. .note{} targets any element who class attribute has the value of note. Or p.note{} targets only <p> elements who class attribute has the value of note.
  • id selector matches an element whose id attribute  has the value that matches the one specificed after the pd sign or hash symbol.  i.e.  #introduction targets the element whose id has the value of introduction.
  • child selector Matches an element who is a direct child of another. i.e. li>a {} Targets the elements a who are a direct child of li but no other a's on the page of other li.
  • Descendent selector Matches an element that is descendent of another specificed element but not a direct child. i.e. p a{} Targets any a element that sits inside a p element even if there are other elements nested indbetween them.
  • Adjacent sibling selector  Matches an element that is the next sibling of another.  i.e. h1+p {} Targets the first p element after any h1 but no other following p elements.
  • General sibling selector Matches an element that is a sibling of another but does not have to be the directly perceding element.  i.e. h1~p [] Targets any <p> element after and the <h1> element.

Comments (0)

500 characters remaining

Cancel or