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.
Example:
h1{
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.
Syntax:
.classname(Remember the dot means class selector)
Example:
.legs{
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.
Syntax:
#idname(Remember the pound-sign means id selector)
Example:
#snout{
border: solid red;
}
Finds a single element whose id = “snout” and gives it a solid red border.
Pseudo-Selectors
- 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!!
Syntax:
sel1, sel2, sel3 (Remember the comma to group several different selectors)
Example:
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