CSS Selectors: How they work and Types of CSS Selectors

in technology •  5 months ago

A CSS selector is an aspect of CSS rules set that helps selects the elements we would like to apply specific styles to.

CSS Selectors enable us to focus on specific HTML components and apply different CSS styles to them.

For example let's say we want our entire page to appear with a grey background, the CSS style to effect that will be

body {
    background: grey;
    }

In the above line of code body is used to indicate that all contents nested in the body element should be given a background of grey.

The CSS selector in this context is body which is classified and referred as a type selector.

There are a number of CSS selectors available, here's a list of 4 common selectors with quick descriptions to get you going.

Types Of CSS Selectors

1. Type Selectors

Type selectors usually match the name of the elements they are targeting.

Here are examples of Type Selectors

body {
    background: grey;
    }

a {
    color: white;
    }

ul {
    height: 300px;
    }

The CSS selectors in the style above are body, a, and ul.

  • body will affect the contents of <body></body> tag.

  • a will affect the contents of the <a></a> tag.

  • ul will affect the contents of the <ul></ul> tag.

2. Class Selectors

Class selectors matches the value of a class attribute value assigned to any element.

The styles set for this class attribute value will be applied on the element on the class is assigned to.

Here's an example on how to use class selectors

HTML

<p class="warning">Danger</p>

CSS

.warning {
    background: red;
    color: white;
    }

Because the <p></p> tag has been assigned a class attribute value warning, it's contents will appear on the page with a red background and text color set to white.

Class selectors are declared by adding a . before typing the class attribute value in the CSS stylesheet.

An instance can be found in the example above where the attribute was referred to as .warning instead of warning

3. ID Selectors

ID selectors matches the value of a id attribute assigned to any element.

All styles set for the id value in the stylesheet will be applied on the contents of the tags containing a matching the id attribute value in the HTML (just like class selectors).

Here's an example

HTML

<p id="warning">Danger</p>

CSS

#warning {
    background: red;
    color: white;
    }

Having a id value warning in any tag will make the content of the element appear with a red background and text-color set to white.

Note that class selectors and id selectors are quite similar in their use cases save for one distinction which is explained below.

Where class selectors are declared by using the prefix . id selectors make use of the # symbol.

In the example above we use #warning as the selector instead of using .warning which is a class selector or warning which is wrong syntax and won't work at all.

4. Descendant Selectors

Unlike other selectors mentioned earlier in this post descendant selectors work differently.

The distinction that comes with using descendant selectors is that other selectors use one parameter to identify the target element, whereas in the case of descendant selectors it take two parameters to identify the target element.

Here's an example showing a descendant selector in use

HTML

<p>Let's ride on <span>to  greatness</span></p>

CSS

p span {
    color: blue;
    }

The above CSS code will apply the set styles to all contents of any <span></span> tag nested within a <p></p> in the HTML.

Descendant selectors are not limited to element tags only, we can also use class and id attribute values in place of tags.

In future posts we will cover other types of CSS selectors.

Meanwhile, you can find additional information on CSS selectors by checking out Mozilla's MDN Web Docs.


Thanks for checking out this post, should you have any thoughts or additional opinions on the different types of CSS selectors kindly share in the comment section.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!