When creating a website there are two essential coding languages being used - HTML and CSS. Cascading Style Sheets, or CSS, give your HTML layout, design, and display variations for various devices. By utilizing CSS selectors we can create a rule to target HTML elements that include properties to accomplish the desired design. We will cover what CSS selectors are, how to utilize them, and the types of selectors.
What is a CSS selector?
CSS selectors are part of a CSS rule that allows you to select the contents you want to style. In this post, we are going to look at the following types of selectors and see how we can utilize them.
Basic Selector Types
- Type selectors
- Class selectors
- ID selectors
- Universal selector
Type selectors will match every instance of the element type (heading elements, p, span, div, etc.) in the document tree.
The following rule will target all H1 elements in the document tree:
Class selectors are designated with a . (period) before the class name when being used in a selector. Suppose we have an HTML document that has the following snippet of code:
We can utilize the CSS class selector to target the .quote and .author classes to give the elements the desired styles like so:
As opposed to class selectors, an ID selectors uses a hash (#) when being used in a selector.
Universal selectors will select all elements within a tag. The following example will select every element that is within a div.
Advanced Selector Types
- Attribute selectors
Pseudo-elements permits formatting based on information that lies outside of the document tree. As of CSS3, in order to designate the difference between pseudo-elements and pseudo-classes, pseudo-elements are designated with two colons. For Internet Explorer 8 and below support, use a single colon. There are currently five total pseudo-elements:
An ::after can be utilized for many things, including adding quotes to all q elements. For example:
Alternatively a ::before/::after can also be used to insert content like so:
Pseudo classes are added to selectors to specify a certain state of an element. The full list of pseudo-classes includes:
Suppose we want our links to be dark blue, purple on hover, and red for visited links. We can achieve this with the code below.
Alternatively, if we wanted to override the link color for all links with a class of .external we can do:
Attribute selectors are used to target elements based on the presence of and/or the value of HTML attributes associated with the element. These selectors are denoted with square brackets.
Using an link as an example, let's cover the seven ways we can target the link based on attribute of an anchor element.
a[href]Represents an anchor with the presence of an href.
a[href="http://www.volusion.com/"]Represents an anchor with an attribute of href and a value of exactly http://www.volusion.com/. Note that this is case-sensitive.
a[title~="Volusion"]Represents an anchor with a title whose value is a white-space separated list of words, where one of which consists of the value Volusion.
a[title|="foo"]Much like the ~= operator, the |= represents an anchor with a title whose values are hyphen-separated lists that contain the value of foo.
a[href^="http"]Represents all anchors with an attribute of href that start with http.
a[href$=".com"]Represents all anchors with an attribute of href that end with .com.
a[href*="volusion"]Represents all anchors with an attribute of href that contains the word volusion.
On particular occasions where we want to target elements based on their relationship with other elements, we will want to utilize combinators. Combinators are a lot like human relationships in that like human families, CSS has descendants, children, parents, and siblings. We will cover each of the four different combinator types in detail.
- Descendant selector
- Child selector
- Adjacent sibling selector
- General sibling selector
A descendant selector can target all elements that are a descendant of a specified element. To select all <p> elements that are within a <div>, we can do the following:
A child selector is similar to a descendant, except it selects only immediate children.
Adjacent Sibling Selectors
The adjacent sibling selector is denoted using the plus symbol (+). This selector is used in cases where we want to target elements only when the element is immediate proceeded by another targeted element.
In the example below, the p element immediately proceeding the H1 will have the color of gray, while the color of the other p elements will be black.
General Sibling Selectors
A general sibling selector is much like an adjacent sibling selector, with the only difference being that it selects all elements proceeding a targeted element rather than one. The general sibling selector is denoted using a tilde (~).
In the example below, all p sibling of the H1 element will have the applied styles. However, the paragraph within the div will not because it is not a sibling of the H1.
- Alex Martinez, Front End Web Developer