Skip to content

Basic selectors

Elements on the page can be selected in many ways. However, the four selectors below are most commonly used:

  • HTML tag name
  • class
  • object identifier
  • attribute value ([attr=value])

In addition, we have more advanced selectors, such as, for example:

  • direct child
  • child
  • direct siblings
  • siblings

Tag selector

CSSs allow you, as selector, to directly select an HTML tag. The page element is selected after the HTML tag name.

For example, for the following paragraph:

<p>Example text in paragraph.</p>

If you want to add a CSS rule using the selector, you have to enter its name in the CSS code after the tag name, and then enter the properties with values in curly brackets. The rule below changes the color of all <p> tags to red.

p {
    color: red;
}

Class selector

Each HTML tag can have an attribute class, which takes the class name as its value. This class can have any name (chosen by us), e.g:

<p class="some-paragraph">Example text in paragraph.</p>

One tag can have multiple classes. In this case they are separated by spaces, e.g:

<p class="p1 p2">Paragraph with p1 and p2 classes</p>

Styling with class names is one of the more common ways to style HTML documents. We use this method, when we want to give a style to several elements, e.g:

<p class="text-elem">First paragraph</p>
<p>Second paragraph</p>
<span class="text-elem">First span</span>
<span>Second span</span>

In a situation like the above, if we want to give red to the text in the first paragraph and inside the first tag <span>, we can give them a class with the same name and then assign the corresponding rule in CSS, i.e:

.text-elem {
    color: red;
}

In the CSS file, if you want to use the selector by the name of class, first type dot and then enter the class name immediately.

ID selector

Elements in an HTML document can also be selected using its identifier. Each element in an HTML document can have such an identifier using the id attribute with a unique value in the page. 

<p id="first-paragraph">Example text in paragraph.</p>

To select a tag after an identifier, use the # character and then enter the name of the identifier immediately, e.g:

#first-paragraph {
  size: 2rem;
  color: blue;
}

Attribute selector

You can also style elements containing an attribute with a specific value. Consider the input tag with the following form:

<input type="text">

If you want to style the above <input> with a type attribute with a value of text, you need to indicate an element, and then inside the characters [ ] the attribute with its value, e.g:

input[type="text"] {
  margin: 2px;
}

Direct child selector

We can also select elements that are directly child of the tag. In this case the father and child selector is separated by a > sign, e.g:

<ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li>Text1</li>
</ul>
<a href="#">Link4</a>

li > a {
  color: red;
}

This rule will work only on the <a> marker, which is a direct child of the <li> element. In the example above it will be Link1 and Link2.

A child selector

The selection of children is separated by a space, e.g:

<div>
  <a href="#">Link1</a>
  <p>lorem ipsum dolor sit amet <a href="#">Link2</a></p>
</div>
<a href="#">Link3</a>

div a {
  color: red;
}

This rule will apply to all <a> nested in <div> regardless of the nesting level. In the example above it will be Link1 and Link2.

Direct sibling selector

The selector of direct (close) siblings is separated by a plus sign +, e.g:

<p>lorem ipsum dolor sit amet</p>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>

p + a {
  color: red;
}

This rule will work only on the first <a> being immediately after the <p> at the same level of the document structure. In the example above it will only be Link1.

Sibling selector

The sibling selector is separated by a tilde sign ~:

<a href="#">Link1</a>
<h3>Header</h3>
<a href="#">Link2</a>
<a href="#">Link3</a>

h3 ~ a {
  color: red;
}

Such a rule will apply to all <a> elements located after <h3> at the same level in the document structure. In the example above it will be Link2 and Link3.

Grouping selectors

CSS rules allow you to define a style for multiple selectors simultaneously. For this purpose, the selectors should be separated from each other by commas:

p, .button, #password-field, span {
    color: red;
}