In this section, we will learn what the selectors are and how to use them in CSS.
Note: we’re assuming you’re already familiar with the CSS style in general.
What is a Selector?
The CSS selector is the method we use to access an HTML element or multiple elements and apply styles to them.
In short, this is the syntax of using selectors in CSS style:
selector {
//body…
}
As you can see, before the declaration block, we specify the selector. This `selector` can be anything that points to an HTML element/s. For example, we can simply put the name of an HTML element like `p` or `img` or `div` etc. as the replacement of the selector. This means the target of the style we’ve written in the body of the declaration block is the specified element/s in the selector. For example, if the value is set to `p`, then the target of the style will be the entire <p> element in the HTML document.
There are multiple methods we can use to select an element or multiple elements at the same time on a page which is known as types of selectors. So let’s go and get familiar with these types of selectors in CSS.
Types of Selectors in CSS:
In short, these are the types of selectors supported in CSS:
- CSS Universal Selector
- CSS Element Name Selector
- CSS Class Selector
- CSS Id Selector
- CSS Child Selector
- CSS Attribute Selector
Note: other than these types of selectors, there are other ways as well which are supported in the next couple of chapters.
CSS Universal Selector:
The universal selector is the one that we use when there’s a style we want to apply to the entire elements in an HTML document! This means if, for example, we want to change the background of the entire elements in a page to a color like gray, or if we want to set the margin of the entire elements to 0 or a different value, we can use the universal selector and then write the target style in the declaration block of the universal selector.
Alright, let’s see the syntax of this universal selector then:
CSS Universal Selector Syntax:
*{
//body…
}
Here, you can see that we’ve replaced the selector with the asterisk `*` symbol. This means the target of the style written in the body of the declaration block will be the entire elements of the document!
Example: all of the elements selector
See the Pen all of the elements selector by Omid Dehghan (@odehghan) on CodePen.
For this document, we’ve set the border of the entire elements to red (using the CSS border property). So now, if we load this document on a page, we can see that all elements have a red border around them.
CSS Element Name Selector
This method of targeting elements in CSS is based on the name of HTML elements. For example, let’s say we want to style every <p> elements in an HTML document. Well, to do this, we need to set the selector of the target declaration block to the value `p`.
For example:
p{
//CSS properties
}
Here, the target of this declaration block will be the entire <p> elements of a page.
Example: using element name selector in CSS
See the Pen using element name selector in CSS by Omid Dehghan (@odehghan) on CodePen.
In this document, the target of the style is the entire <div> elements on the page.
CSS Class Selector:
The next method of selecting one or more HTML elements is by the value set in their class attribute! For example, using the class selector, we can select the entire elements in an HTML document that has the value “apple” as the value of their class attribute.
CSS Class Selector Syntax:
.class-name{
//CSS properties
}
`.class-name`: this is the class name we want to apply CSS style to any element that has this value set for their class name. Note that the class name is prefixed with the dot operator.
Note: an element might have more than just one value for its class attribute. But it doesn’t matter! As long as it has the specified class name used in the CSS to style, the target element will take those styles as well.
Example: CSS select by Class
See the Pen CSS select by Class by Omid Dehghan (@odehghan) on CodePen.
In this document, we’ve applied the class A to the first paragraph and class B to the second paragraph. Then we used CSS class selector and applied the blue border to those elements that are in the class A and applied the red border to those elements that are in the class B.
CSS Id Selector
Another method of selecting HTML elements to bring them into the CSS to style them is by using the value of the id attribute.
For example, let’s say the value of an id attribute for an element is set to “success-button”, now using the id selector we can target that specific element that has this value for its id attribute and apply any type of CSS style to it.
CSS Id Selector Syntax:
#id{
//CSS properties...
}
`#id`: we prefix the target id value with the # symbol and set it as the selector for a declaration-block.
Example: CSS select by Id
See the Pen CSS select by Id by Omid Dehghan (@odehghan) on CodePen.
In this document, both paragraphs are in the class A and so we’ve targeted this class in the CSS style to apply a blue border to them.
But then the first paragraph had the id attribute with the value “firstp”. So we used this value and wrote a style for it in the CSS. Now when browsers see this style, they check the id attribute of every element on the page and the one that has the specified value for its id attribute will be styled accordingly.
CSS Child Selector
The next method of accessing the elements in an HTML document is by using the child selector.
In this method, we only target those elements that are the children of a specific element!
For example, let’s say you have multiple <p> elements in your HTML document, but only want to style those elements that are the children of a <div> element that has the id value of “live”. So using the Child Selector, we can easily do that.
Here’s the syntax of this selector:
parent-element > child-element {
//body…
}
Here, the `parent-element` is the target element that we want to apply style to one or more of its children. This element can be declared using element-name selector, class selector or an id selector.
`child-element`: this is the target element/s of the parent element that we want to apply CSS style to them. Again, the value we put as the replacement of the `child-element` could be the name of the target element/s, the value of the class attribute or the value of the id attribute.
For example:
#parent > .child {
//body...
}
Here, the target elements of this style are those elements that first, have the value `child` for their class attribute and secondly, are the children of the element with the `parent` id. So any element with this property will be the target of this style.
Example: CSS select child
See the Pen CSS select child by Omid Dehghan (@odehghan) on CodePen.
CSS Attribute Selector:
This method of selecting elements is based on the value of their attributes! For example, we can target an element that has the value “radio” set for its `type` attribute. Or let’s say an element that has the attribute `name` with the value `username` etc.
So element selection is based on the value of an attribute.
CSS Attribute Selector Syntax:
This method of selecting elements has 7 types which are:
|
Element-name [attribute ] { property:value; } |
Element-name [attribute ~=”value” ] { property:value; } |
|
Element-name [ attribute= “value” ] { property:value; } |
Element-name [ attribute ^= “value” ] { property:value; } |
|
Element-name [ attribute $=”value” ] { property:value; } |
Element-name [ attribute *=”value” ] { property:value; } |
|
Element-name [ attribute|=”value” ] { property:value; } |
Note: there’s no space between the `element-name` and the pair of braces `[]` that comes after that.
In short, we first specify the name of an element and then within the pair of `[]` specify the attribute and its target value.
For now, just get an overall view of these 7 methods. In the next section, which is CSS Attribute Selector, we’ve explained them one by one in a greater detail.
Example: CSS select by attribute
See the Pen CSS select by attribute by Omid Dehghan (@odehghan) on CodePen.
In this document, the target of the `p[class=”second”]` selector is those <p> elements that have the value `second` set as the value of their class attribute.
CSS Multiple Selectors
In CSS, we can use more than one selector for a declaration-block. In that case, the style written in the declaration block will be applied to all those target elements that we specify in the selector part.
Here’s the syntax:
selector1, selector2, selector_n{
//body…
}
Note: each selector is separated using a comma.
Example: using multiple selectors in CSS
See the Pen using multiple selectors in CSS by Omid Dehghan (@odehghan) on CodePen.
