CSS Selectors: Beginner's Guide Part 1

In this blog, we are going to explain CSS selectors in detail based on this plan:

Although we are using this type of selector quite a lot they are still not enough when it comes to applying a specific style for a particular set of elements, we are usually using one specific attribute which is present in all HTML elements to target a specific one without affecting the rest of elements that have the same tag, it’s called “*class selector”.*To use it we start with the dot notation ‘.’ followed by the name of the class. Let's see an example that illustrates this one.

     <p>Soemthing</p>
        <div >
          <p class="make-it-bold">Something else</p>
          <div>
            <p>Another thing</p>
          </div>
        </div>

By observing this example we can see that we set the attribute class of the p tag inside the first div to a value which is in this case "make-it-bold" so when we want to target this specific p tag in this location we can use the class attribute associated to it to perform the desired style. Here is how :

    .make-it-bold{
      font-weight: bold;
    }

So here we see the results in the browser we can observe that the only p tag which is turned from a font weight of 200 to bold is that specific one with the class make-it-bold. The importance of this selector is more crystalized when we want to target different HTML tags and give them the same style. Say we have the following case:


    <p class="thin-text">text1</p>
        <div >
          <a class="thin-text">Text2 else</a>
          <div>
            <span class="thin-text">Text3</span>
          </div>
        </div>

In this code example, we have a span tag, p tag, and anchor tag, all of which we need to apply the same style which is a thin font instead of targeting each one this way:

p,span,a{ font-weight: thin; }

which is going to cause problems later if we add more p tags or one of those targeted here we don’t necessarily want them to get that specific style so the class selector, in this case, is mandatory and we can achieve our desired behaviour in this way:

    .thin-text{
     font-weight: thin;
    }

Combining the two selectors we have seen previously we can target different sets of elements let’s see how this works:

<p class="thin-text red">text1</p>

<div class="wrapper" >

<a class="red">Text2 else</a>

<div>

<p>something else</p>

<span class="thin-text red">Text3</span>

<span class="thin-text">Text3</span>

</div>

Let’s try to understand all those concepts in this examples , we want for instance to target:

* The p tag with class : p.thin-text

* All elements that have both classes: thin-text and red: .thin-text.red

* All elements that have class thin-text but are children of the div with class .wrapper: .wrapper .thin-text

You are starting to see the pattern: when the question involves some specific tag with a specific class or classes we write them attached p.thin-text ,p.thin-text.red , or p.red whereas when we are looking for children of some specific element with some specific style where add a space between the selector that represents the parent, and the one representing the child.

* Elements with either thin-text or red class: .red, .thin-text

So when all the conditions should be met we attached the selectors when only one is necessary (both included) we do a comma .

Id Selector:

Just like any HTML element has a class attribute, it also has an id. The id attribute is usually used in the JS part when trying to target elements, however, you can still use it in the CSS stylesheets, The use of it is more specific than a class makes it useful, in case you already know that in the whole project you are going to do this specific style to one and only one element, because each element should have its unique id. The uniqueness of it makes it rarely used in most cases.

To use this selector we start by adding the id attribute in the HTML element we want to target :
```
  <p id="only">unique</p>
     <div >
      some thing goes here
     </div>
```
Then we target it in the stylesheet using the symbol # followed by the value we assigned to the attribute in this case ‘only’:
```
 .only{
   color:red;
 }
```
CSS provides different selectors for any case you might think of; while we have a selector to be used for uniqueness( to target one and only one ) we have another which is used to target every element only using one selector, and that’s what we call “The universal selector”
- Universal selector:
  
  Indicated by an asterisk (*), the universal selector selects everything in the document if it’s not preceded by any other selector or chain of selectors. If it is preceded by a selector or chain, it targets all the child elements of that chain. Here’s an example:
```
  <h1>Hello world</h1>
  <p>am a programmer</p>
  <div>
     <p>here is a paragraph </p>
      <p>here is a paragraph </p>
     <span>this is another one</span>
  </div>
  <p>Another thing</p>
```
  In this example, if we want to target all the elements in the document and give them a border and a colour, we can do it this way:
```
  * {
    border: 1px solid red;
    color: red;
  }
```
  However, if we only want to target the elements inside the div, we can do it like this:
```
  div * {
    border: 1px solid red;
    color: red;
  }
```
  This way, only the children of the div will be affected by the style.
  
  The importance of this selector is significant, especially when working on large projects with many elements.

If you found this helpful, please consider subscribing to our newsletter and hitting the like button to support the blog.

Understanding CSS Selectors: A Beginner's Guide (Part 1)

Table of contents

Table of Contents:

How CSS Looks like:

What is a selector:

Simple CSS selectors:

Subscribe to my newsletter

Zainab JINARI

Zainab JINARI