Selectors
Last updated
Was this helpful?
Last updated
Was this helpful?
CSS Selectors map a single CSS rule to a specific HTML element.
As we saw earlier, we can assign a style to all elements of a particular type. This type of selector, called a type selector, is less-frequently used because you typically want to be more granular in targeting the elements you want to style.
There are several types of CSS selectors, which offer different ways to select HTML elements. The common ones are shown in the following table.
Selector
Example
Description
Class selector
.text { }
Selects all HTML elements with class class="text"
Type selector
p { }
Selects all p HTML elements
ID selector
#text { }
Selects all HTML elements with ID id="text"
Descendant combinator
article p
Selects all p HTML elements that are a descendant of an article element
Child combinator
article > p
Selects all p HTML elements that are a direct child of an article element
Pseudo-class selector
p:hover { }
Selects all p HTML elements that have a mouse hovering on them
Class selectors let you apply CSS styles to particular elements. Class selectors require two things:
A class attribute on the HTML element(s) you want to target
A matching CSS class selector (.classname) in your stylesheet.
The CSS rule is only applied to the HTML elements that have the corresponding class attribute. One class selector can be applied to multiple HTML elements.
You will use class selectors more than any other type, as they are the most flexible and you can target multiple elements with one selector.
ID selectors let you apply CSS styles to one specific element. ID selectors require two things:
An id attribute on the HTML element you want to target
A matching CSS id selector (#id) in your stylesheet.
The CSS rule is only applied to the HTML element that has the corresponding id attribute.
Limit your use of ID selectors. They are harder to maintain, since they are tied to a single HTML element.
These two selectors are used to target descendants of a given element.
Child Selector: parent > child
(targets immediate children only)
In the example below, only the<a> element directly beneath the <section> element matches the selector section > a.
Descendant Selector: parent descendant
(targets any descendant)
In the example below, every <a> element beneath the <section> element matches the selector section a.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). The most frequent use-case for pseudo-classes are for styling links based on the different states:
:hover - when the mouse hovers over link
:link - default style for link
:visited - style after link has been clicked/visited
Not all browsers implement each CSS feature exactly the same. To ensure that your HTML pages look the same across browsers, you can set the default styles and then set your own default starting from a known base-line.
There are more selectors, but it's better to focus on the ones you will use most often before moving on to the more advanced ones, such as combining selectors, attribute selectors, nth-child selectors and more. For the full list, consult MDN.
The value for the HTML class or id attribute can be almost anything you want as long as it matches your selector in your CSS file. The standard naming convention is to use all lowercase and hyphens for spaces.
An HTML element can have more than one CSS class selector specified in the class attribute. In this case all of the CSS rules matching the CSS class selectors will be applied.
An HTML element can have more than one CSS class selector specified in the class attribute. In this case all of the CSS rules matching the CSS class selectors will be applied.
Each property-name property-value pair should be on a single line with a semi-colon at the end of the line.
