CSS Basic Selectors

Learn the basics things about Selectors in CSS

In CSS, selectors are used to target the HTML elements on our web pages that we want to style.

There are several different types of selectors in CSS.

Type Selector
Class Selector
ID Selector
Universal Selector
Attribute Selector

Allowing for fine-grained precision when selecting elements to style.

In this article we will take a look of the Basic Selectors

Basic selectors

Type Selector

Suppose we have a input element on the page, and we want to display the words into it using the green color.

We can target the node using this selector input, which targets all the element using the input tag in the page. A simple CSS rule to achieve what we want is:

input {
  color: green;
}

This selector is called type selector and selects all elements that match the given node name, every HTML tag has a corresponding selector, for example: div, p, span, img, etc.

If a selector matches multiple elements, all the elements in the page will be affected by the change.

Class Selector

The HTML elements have a class attribute that is very commonly used withing CSS to associate styling, you have to keep in mind that the class could be repeated inside the HTML document across multiples elements, using classes you can also select an element with 2 or more specific class names.

The classes are identified in CSS by using . dot symbol

<span class="warning">
  Warning
</span>

.warning {
  color: red;
}

ID Selector

The HTML elements also have an id attribute but this one could only be used by a single element in the whole HTML document

The IDs are identified in CSS using the # hashtag symbol

Example using an id:

<span id="alert">
  alert
</p>

#alert {
  color: yellow;
}

Universal Selector

This selector is identified using the * asterisk symbol, and selects all elements of the HTML document.

* {
  color: green;
}

Attribute Selector

This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element or even make a selection based on the presence of an attribute with a particular value

[attribute] Matches elements containing a given attribute

a[title] {
  color: green;
}

[attribute="x"] Matches elements containing a given attribute with a given value

a[href="https://toncho.dev"] {
  color: yellow;
}

[attribute~="x"] Matches elements containing a given attribute with a value that contains a sub-value within a space-separated list

span[title~="Style"] {
  color: red;
}

/*
matches span elements with a title that contains 'Style'
(such as in title="Cascading Style Sheets")
*/

[attribute|="x"] Matches elements containing a given attribute with a value that contains a sub-value within a hyphen-separated list

html[lang|="en"] {
  color: green;
}

/*
matches html element with a lang attribute that contains 'en'
(such as in lang="en-gb")
*/

[attribute^="x"] Matches elements containing a given attribute with a value that starts with something

a[href^="https://"] {
  color: green;
}

/*
matches a elements with an href attribute, the value of which
begins with 'https://'
(such as in href="https://toncho.dev")
*/

[attribute$="x"] Matches elements containing a given attribute with a value that ends with something

a[href$=".com"] {
  color: yellow;
}

/*
matches a elements with an href attribute, the value of which
ends with '.com'
(such as in href="https://google.com")
*/

[attribute*="x"] Matches elements containing a given attribute with a value that contains something

a[href*="toncho"] {
  color: red;
}

/*
matches a elements with an href attribute, the value of which
contains 'toncho'
(such as in href="https://toncho.dev")
*/

Selecting an element with a class or id

You can select a specific element with a class or id attached.

Class:

<p class="toncho">
  Toncho
</p>

p.toncho {
  color: green;
}

ID:

<p id="toncho">
  Toncho
</p>

p#toncho {
  color: green;
}

Selecting multiple classes

You can select an element with a specific class using .class-name, as you saw previously. You can target an element with 2 (or more) classes by combining the class names separated with a dot, without spaces.

<p class="toncho dev">
  Toncho Dev
</p>

.toncho.dev {
  color: yellow;
}

Combining classes and ids

In the same way, you can combine a class and an id.

<p class="toncho" id="dev">
  Toncho Dev
</p>

.toncho#dev {
  color: yellow;
}

Grouping selectors

You can combine selectors to apply the same declarations to multiple selectors. To do so, you separate them with a comma.

<p>
  My username is:
</p>
<span class="name">
  DevToncho
</span>

p, .name {
  color: yellow;
}

You can add spaces in those declarations to make them more clear:

p,
.name {
  color: yellow;
}

If you want to see more infor about CSS Simple Selector go take a look at the MDN documentation

Toncho Dev TD