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.
- Type selectors
- Class selectors
- ID selectors
- Universal selector
Type SelectorsType 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 SelectorsClass 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:
ID SelectorsAs opposed to class selectors, an ID selectors uses a hash (#) when being used in a selector.
Universal SelectorsUniversal selectors will select all elements within a tag. The following example will select every element that is within a div.
- Attribute selectors
Pseudo-elementsPseudo-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:
Pseudo-classesPseudo classes are added to selectors to specify a certain state of an element. The full list of pseudo-classes includes:
Attribute SelectorsAttribute 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.
- Descendant selector
- Child selector
- Adjacent sibling selector
- General sibling selector
Descendant SelectorsA 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:
Child SelectorsA child selector is similar to a descendant, except it selects only immediate children.
Adjacent Sibling SelectorsThe 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 SelectorsA 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