CSS Selectors

/ CSS /

What is a CSS Selector?

If we want to style HTML tags, we will definitely need CSS selectors and combining them with each other. These selectors tell browsers which CSS codes to apply to which HTML tags. In fact, these selectors are a form of addressing.

These selectors select HTML elements according to ID, class, type, attribute, etc. Below we introduce some of the most important CSS selectors.

Types of CSS selectors

  • Grouping Selector
  • ID selector
  • Class Selector (Dot Symbol)
  • Child Combinator
  • Star Symbol
  • General Sibling Combinator
  • Adjacent Sibling Combinator
  • Attribute Selector

After introducing these selectors along with the practical example, we will combine these selectors together.

Grouping Selector:

The grouping selector is used to select all elements with the same definitions. For example, below all the p tags of the HTML tags on the page will have red text.

p {
    color: red;
} 

<p>This is a Paragraph.</p>

This is a Paragraph.

According to this example, in fact, most CSS selectors can be considered a type of this case because CSS styles are not written inline, so they can be applied to a large number of HTML tags and elements. You will find out more about this later.

#: ID selector from Element

You can add an “id” attribute to all HTML elements and tags. Just keep in mind that only one “id” with a specific name can be placed on an HTML page, in other words, each “id” on the HTML page is unique.

This selector finds the tag whose ID is specified on the page and applies CSS codes to it.

#paragraph {
    border: 1px solid black;
}

<p id="paragraph">This is a Paragraph.</p>

This is a Paragraph.

In this example, the id attribute with the name paragraph is added to the p tag, and the browser is told through CSS that the CSS style, which includes the border definition, is applied to the tag whose id is “paragraph”.

Because this selector is applied on id, it cannot be applied as a grouping selector.

. : Class Selector (Dot Symbol)

Class attributes are like id, except that a specific class can be applied to multiple HTML elements or tags. To understand the difference between id and class, you can refer to the article id and class.

.menu{
    background-color: #ccc;
}

Or

div.menu{
    background-color: #ccc;
}

<div class="menu">
    <a href="https://honarsystems.com/">Home</a>
</div>
Home

In the example above, a class named “menu” is defined, which includes the background color “#ccc”. This style will be applied to any element or HTML tag that has a class named “menu”. The number of these elements, unlike the id, can be infinite.

In this example, it is even said that this style should be applied only to div tags that have a class named “menu”. If you use “div.menu” and the page contains a p tag with the menu class name, this CSS style will not be applied to p.

This selector can also be called a group selector because it affects a large number of elements.

>: Child Combinator

This CSS selector selects only direct children. For example, in X > Y, elements of Y that are direct children of X will be selected.

.menu > a{
    background-color: #ccc;
}

<div class="menu">
    <a href="https://honarsystems.com/">Home</a>
</div>
Home

In this example, only “a” tags that are direct children of the menu class will be selected. There may be a “p” tag inside the “menu” class and an “a” tag inside that “p” tag so that “a” tag will not be selected because it is not a direct child of the “menu” class.

*: Star Symbol

CSS universal selector (*) includes all elements of any type. The star icon targets all elements in the selected element’s subset. Many developers use this trick to remove margins and padding.

* {
    background-color: #ccc;
}

For example, in the example above, all the background elements on the page will be “#ccc”.

Sometimes it is necessary to add a similar style to the children of a specific element, which we use for styling.

.menu * {
    background-color: #ccc;
}

The background of all children in the “menu” class will be “#ccc”.

~: General Sibling Combinator

If we want to select even rows of an element, we use this selector. This selector selects all the rows next to the element and applies the defined styles to them.

.card div ~ p {
    background: #cccccc;
}

<div class="card" >
    <div>Test</div>
    <p>This is Test.</p>
    <p>This is Test.</p>
</div>
Test

This is Test.

This is Test.

In this example, all the p tags that are in the same row as the div tag in the card class are selected.

+: Adjacent Sibling Combinator

This selector is like General Sibling, except that it only selects its adjacent elements. That is, the elements that are right next to it and the rest are not selected.

.example h2 + p {
    color: gray;
}

<div class="example">
    <p>This is Test.</p>
    <h2>Test</h2>
    <p>This is Test.</p>
    <p>This is Test.</p>
</div>

This is Test.

Test

This is Test.

This is Test.

In this example, only the first p tag after the h2 tag is selected and the rest of the p tags are not selected by the CSS selector.

[attribute]: Attribute Selectors

[attribute] selector is used to select elements with a specified attribute.

.menu a[target="_blank"] {
    background: #cccccc;
}

<div class="menu">
    <a href="https://honarsystems.com/" target="_blank">Home</a>
</div>
Home

In this example, those “a” tags are selected from the menu class that has the target attribute whose value is _blank.

In this example, _blank is always constant, but sometimes we may want to select an element whose attribute name is a fixed part, but the other part is variable for each element. for example:

.card p[class*="paragraph-"] {
    background: #cccccc;
}

<div class="card">
    <div>Test</div>
    <p class="paragraph-1">This is Test.</p>
    <p class="paragraph-2">This is Test.</p>
    <p class="paragraph-3">This is Test.</p>
</div>

In this example, the class names of the p tags are variable, but their “paragraph-” part is fixed. Using attribute selectors in CSS, you can easily select these types of elements as above.

Combining CSS selectors

In the following, we will discuss the combining of the CSS selectors mentioned above. Combination of the CSS selector is a complex way to add CSS styles to elements.

Combining of the CSS > and * selectors

Now, for example, we want all the first children of the menu class to have the background color #ccc. The following example can be used for this.

.menu > * { 
    background-color: #ccc; 
}

In this example, we can see the combination of the > and * (star) CSS selectors to add the background of all direct children of the menu class to #ccc.

Related Posts

Shopping Cart