CSS Selectors

CSS?relies on pattern matching rules to determine which style applies to which element in the document. These patterns are called?selectors?and they range from tag names.

A CSS selector is the part of a CSS style call that identifies what part of the web page should be styled. The selector contains one or more properties that define how the selected?HTML should display on the webpage.

TYPES OF SELECTORS

The most straightforward group of selectors targets HTML elements plus classes, IDs, and other attributes which may be added to an HTML tag.

The following is a list of the most common and well-supported CSS selectors. There are many more, but these are the ones you should know well.

A} Universal selector; A?universal selector—also known as a wildcard—matches any element.

* {
  color: hotpink;
}        

This rule causes every HTML element on the page to have hotpink text.

B} Type selector; A?type selector?matches an HTML element directly.

section {
  padding: 2em;
}        

This rule causes every?<section>?element to have?2em?of?padding?on all sides.

C} Class selector; An HTML element can have one or more items defined in its?class?attribute. The?class selector?matches any element that has that class applied to it.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>        

Any element that has the class applied to it will get colored red:

.my-class {
  color: red;
}        

Notice how the.?is only present in CSS and?not?the HTML. This is because the.?character instructs the CSS language to match class attribute members. This is a common pattern in CSS, where a special character, or set of characters, is used to define selector types.

An HTML element that has a class of?.my-class?will still be matched to the above CSS rule, even if they have several other classes, like this:

<div class="my-class another-class some-other-class"></div>        

This is because CSS looks for a?class?attribute that?contains?the defined class, rather than matching that class exactly.

The value of a class attribute can be almost anything you want it to be. One thing that could trip you up, is that you can't start a class (or an ID) with a number, such as?.1element. You can read more?in the specification.

D} ID selector; An HTML element with an?id?attribute should be the only element on a page with that ID value. You select elements with an?ID selector?like this:

#rad {
  border: 1px solid blue;
}        

This CSS would apply a blue border to the HTML element that has an?id?of?rad, like this:

<div id="rad"></div>        

Similar to the class selector?., use a?#?character to instruct CSS to look for an element that matches the?id?that follows it.

If the browser encounters more than one instance of an?id?it will still apply any CSS rules that match its selector. However, any element that has an?id?attribute is supposed to have a unique value for it, so unless you're writing very specific CSS for a single element, avoid applying styles with the?id?selector as it means you can't re-use those styles elsewhere.

E} Attribute selector; You can look for elements that have a certain HTML attribute, or have a certain value for an HTML attribute, using the?attribute selector. Instruct CSS to look for attributes by wrapping the selector with square brackets ([ ]).

[data-type='primary'] {
  color: red;
}        

This CSS looks for all elements that have an attribute of?data-type?with a value of?primary, like this:

<div data-type="primary"></div>        

Instead of looking for a specific value of?data type, you can also look for elements with the attribute present, regardless of its value.

[data-type] {
  color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>        

Both of these?<div>?elements will have red text.

You can use case-sensitive attribute selectors by adding an?s?operator to your attribute selector.

[data-type='primary' s] {
  color: red;
}        

This means that if an HTML element had a?data-type?of?Primary, instead of?primary, it would not get a red text. You can do the opposite—case insensitivity—by using an?I?operator.

Along with case operators, you have access to operators that match portions of strings inside attribute values.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
        

F} Grouping selectors; A selector doesn't have to match only a single element. You can group multiple selectors by separating them with commas:

strong,
em,
.my-class,
[lang] {
  color: red;
}        

This example extends the color change to both?<strong>?elements and?<em>?elements. It's also extended to a class named?.my-class, and an element that has a?lang?attribute.

G}Pseudo-classes and pseudo-elements;? CSS provides useful selector types that focus on specific platform state, like when an element is hovered, structures?inside?an element, or parts of an element.

Pseudo-classes?#

HTML elements find themselves in various states, either because they are interacted with, or one of their child elements is in a certain state.

For example, an HTML element could be hovered with the mouse pointer by a user?or?a child element could also be hovered by the user. For those situations, use the: Find out more in the?pseudo-classes module.

Pseudo-element?#

Pseudo-elements differ from pseudo-classes because instead of responding to the platform state, they act as if they are inserting a new element with CSS. Pseudo-elements are also syntactically different from pseudo-classes, because instead of using a single colon (:), we use a double colon (::).

A double colon (::) is what distinguishes a pseudo-element from a pseudo-class, but because this distinction wasn't present in older versions of CSS specs, browsers support a single colon for the original pseudo-elements, such as?:before?and?:after?to help with backwards compatibility with older browsers, like IE8.

.my-element::before {
  content: 'Prefix - ';
}        

As in the above demo where you prefixed a link's label with the type of file it was, you can use the?::before?pseudo-element to insert content?at the start of an element, or the?::after?pseudo-element to insert content at the?end of an element.

Pseudo-elements aren't limited to inserting content, though. You can also use them to target specific parts of an element. For example, suppose you have a list. Use?::marker?to style each bullet point (or number) in the list

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}        

You can also use?::selection?to style the content that has been highlighted by a user.

::selection {
  background: black;
  color: white;
}        

Learn more in the?module on pseudo-elements.hover?pseudo-class.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}