CSS Selectors

CSS Selectors

Select elements to apply a declared style.

Selector types:

  • Element Selectors: selects all elements of a specific type (<body>, <h1>, <p>, etc.)
  • Class Selectors: selects all elements that belong to a given class.
  • ID Selectors: selects a single element that’s been given a unique id.
  • Pseudo Selectors: combines a selector with a user activated state(:hover, :link, :visited)
Element Selectors

Finds all HTML elements that have the specified element type.


color: blue;

Finds all elements of type <h1> and makes the text color blue.

Class Selectors

Finds all elements of a given class –based on the attribute’s class value.


.classname(Remember the dot means class selector)


font-weight: bold;
background: pink;

Finds all elements whose class = “legs” and makes their font bold and their backgrounds pink.

ID Selectors

Finds a single element that’s been given a unique id–based on the attribute’s id value.


#idname(Remember the pound-sign means id selector)


border: solid red;

Finds a single element whose id = “snout” and gives it a solid red border.


  • Apply styles to a user activated state of an element.
  • If used, must be declared in a specific order in the style sheet.
  • General Purpose Pseudo-Selector:
  • hover Element with mouse over
  • Specific to hyperlinks (and/or buttons)
  • a:active A link or button that is currently being clicked on.
  • a:link A link that has NOT been visited yet.
  • a:visited A link that HAS been visited.

Grouping Selectors

Lets say you want to apply the same style to several different selectors.
Don’t repeat the style –use a comma!!


sel1, sel2, sel3 (Remember the comma to group several different selectors)


h1, .legs, #snout{
font-size: 20pt;

Finds all elements of type <h1>, all elements with class=“legs” and the single element whose id = “snout” then makes their font-size 20pt

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Website development Company in Allahabad Sarkari Exam Quiz