The World Of CSS Selectors !

Hello Everyone 👋🏻 , in this article we will take a dive into World Of CSS Selectors 😃.

So First let's take a look at what CSS looks like. Now, the first thing that you'll see is the Selector. And this comes at the beginning of the CSS rule. And then comes a pair of curly braces inside, which is where your CSS rules are going to reside.

selector {
property : value;
}

And the rule will change the appearance of some property and give it a new value. And each rule has to end with a semicolon at the end. Essentially, the Selector is basically just the who, so who is it that you want to modify in your web page? is it the < h1 >? is it the < p >? whose style do you want to change ?

And the next part is the property. And this is the what. What about that < h1 > do you want to change? Is it the background color? Is it the text color? Is it its position?

And finally, we've got the value. And that is the how. So how do you want to change the background color of < h1 >? Do you want it to be blue? Do you want it to be red? And that's the value that you're going to give in order to change it.

Now lets talk more about Selectors

So there are quite a few different ways we can select elements to style. And I'm going to go over a lot of them here.

So we are going to Begin here by covering Some of the most Important CSS Selectors that we can use. This is crucial part of writting Good CSS is having grasp of diffrent selectors that are avialable for you to use

Types of Selector

1. Universal Selector
2. Element Selector
3. Class Selector
4. ID Selector
5. Descendant Selector
6. Adjacent Selector
7. Attribute Selector
8. Pseudo Classes
9. Pseudo Elements

1. Universal Selector : ( * ) Select Everything! , it selects everything in Document. Honestly, Developer's and myself use this selector to overwrite the default style of all browsers.

Note : you should be aware that your styles aren't the only styles at play. Most browsers have a default implementation control a default set of styles already applied to the HTML elements. ** Browsers have their Default padding and margin.

we use Universal Selector as follow :

// Global Reset
* {
padding : 0;
margin : 0;
}

// also

* {
background-color : #555;
color : #fff;
} //It selects everything in the document.
//but it's not it's not generally a good idea because in a larger document it can be pretty inefficient and there are other ways to achieve this.

2.Element Selector : This selects everything of a given type. for eg : in document there are 5 < button > elements lets select it.

button {
background-color: #555;
color: #fff ;
padding: 10px 20px;
}

as you can see, Element selector select all < button > elements in document. Thats every Button on the page and apply CSS properties that we defined .

• Selector List : We can use (comma ,) , to combine multipule selector in a list. for eg: Lets select h1, h2, h3 together and style them.

// Selector list 
h1,h2,h3 {
color: #ff5a5f;
}

so as you can see it select h1, h2 ,h3 (this document has 2 < h2 > elements) so it styles all of them and makes them purpule and make font style italic for selected elements. so we can use Selector List in multipule sitiuation , but this is common one when we have 2 elements or more than 2 , that you want to style similarly.

3. The ID Selector: The CSS ID selector identifies an element based on its ID attribute. ID selectors are unique, and we should only use them once per page to select one unique HTML element. To select an element with a specific ID, write a hash (#) character, followed by the element's ID. lets see through coding example.

/* All button Elements Selected */
button {
  background-color: brown;
  color: #ffff;
  padding: 5px 10px;
  font-size: 16px;
}

/* ID Selector */
#unique {
  background-color: purple;
  color: #ffff;
  padding: 10px 25px;
  font-size: 18px;
 }

As you can see in the above image and code 1st we target every < button > element through Element selector. But < button id= "unique" > Vote+ < /button > is having different style. just take a note here Another very very important thing know about id is only one thing on a page should have any given id. in our case #unique should only be use once. The whole idea is that it's singling out one thing. It's a unique identifier, so that's pretty much it for the ID selector.

4.The Class Selector: The Class Selector is one of the most commonly used alongside the Element selector. Basically, a class is a similar idea to an ID where we add something into our markup so that we can hook into it in our CSS. Except that a class can be applied to multiple elements.

lets create a class of elements so we can have different groups and style them similarly, which is really common for for a typical website. You're not going to have every single thing be completely different. You often will have groups of things or classes that you style similarly. lets see through coding example

To select elements with a specific class, write a period (.) character, followed by the class name.

/* All button Elements Selected */
button {
  background-color: yellowgreen;
  color: #ffff;
  padding: 5px 10px;
  font-size: 16px;
}

/* The Class Selector */
.btn {
  background-color: purple;
  color: #ffff;
  padding: 10px 25px;
  font-size: 18px;
}

as you can see in above output the elements which is hooked with class .btn is having same style , just by hooking one similar class into elements we can style them accordingly same.

5.The Descendant Selector : The next selector we'll take a look at is the descendant selector, which we write using a ( space ). lets learn about these with coding example.

        <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>

      <br>

      <div>
        <a href="#">Google</a><br /><br />
        <a href="#">Yahoo</a><br /><br />
        <a href="#">Facbook</a>
      </div>

So in this case we have < li > space and then a and this is going to select all anchor tags that are nested or are descendants of an < li > . So they descend from there somewhere nested inside of an < li >. It's a long way of saying that. So that space is very important. It's very different than a comma. A comma is < li > and anchor tags. A space is anchor tags inside of < li >. So no < li > will be styled in this example, only anchor tags if they're nested inside of an < li >.

/* The Descendant Selector */
 li a {
  font-size: 22px;
  color: blueviolet;
  text-decoration: none;
}

take a look above only < a > elements which are inside < li > are getting style and not all < a > from document.

6.The Adjacent Selector: So the adjacent, technically, these are actually called combinations, just for the record The selector here is < h1 > and paragraph. Those are element selectors and this is a combinator that sort of alters the behavior of the overall selection. But most people just call it a selector.

/* The Adjacent Selectors */
h1 + p {
  color: #fff;
  font-size: 40px;
  background-color: #00A699;
  padding: 10px;
}

Anyway, this plus sign is the adjacent combinator, and what this will do is select the paragraphs that are immediately preceded by < h1 >. Or you could think of it the other way paragraphs that come right after an < h1 > on the same level. So they're adjacent. They're not children, or parents are not nested in any way. It's one after the other.

7.Direct descendant Selector: And now the next selector we'll look at is the direct descendant or direct child combinator. We use the greater > than sine that right angle bracket. It's a greater than sine. And this is going to select the < ul > < li > that are direct children of a < div > in this case. So not just generic children nested somewhere in a < div >, but they are the direct descendant, the direct child. So in other words, one level down.

<div>
      <ul>
        <li>Hero</li>
        <li>Villan</li>
        <li>Side Chracters</li>
        <li>Dancers</li>
      </ul>
    </div>

/* Direct descendant Selector */
div > ul > li {
  list-style: none;
  color: orangered;
  font-size: 18px;
}

7. Attribute Selector: The Attribute selector allows us to select elements based upon some particular attribute. lets see through some common example < input > So a really common example is working with input elements where we've seen the type attribute drastically varies, the actual rendered input, whether it's a checkbox or radio button, a text input, a password input and so on. If we wanted to select one type of those, in this case, I'm selecting all inputs where type is set to text. We use the attribute selector, we use the square brackets, and then inside the attribute name equals something.

<div>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Enter Password" />
      <input type="text" placeholder="country" />
      <input type="text" placeholder="state" />
      <input type="text" placeholder="city" />
    </div>

/* The Attribute Selector */
input[type="text"] {
  color: blueviolet;
  font-size: 16px;
}

8.Pseudo Classes: pseudo classes, which are the kind of modifiers that are keywords that we add on to the end of a selector that specify a particular state of those selected elements.

• : active
• : checked
• : first
• : first-child
• : hover
• : not()
• : nth-child()
• :nth-of-type()

So this is how we can target things like checkboxes that have been checked or elements that are being hovered over, or things like every other button. So we're still selecting buttons, but we only want every other or every fifth or every 10th. They are modifiers or keywords we add on and notice that they all start with a colon here. That is important. We do need to add that colon to signify we're using a pseudo class.

Lets try to understand more in coding. why don't we start with one of the most commonly used ones, which is hover.

button {
  background-color: yellowgreen;
  color: #ffff;
  padding: 5px 10px;
  font-size: 16px;
}
/* Pseudo Classes */
button:hover {
  background-color: cadetblue;
}

as you can see when we hover over button element background colors get change . alright thats for Pseudo Classes.

9.Pseudo Elements: All right, so we just covered pseudo classes. Now it's time for pseudo elements. A lot of people confuse these, and honestly, it doesn't really matter terminology wise, but they are distinct concepts. So pseudo elements are also things that we add on sort of like modifiers to our selectors, but they are going to select a particular part of the selected elements so we can style things like the first letter or the first line of some elements. There are nowhere near as many.

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

Let's take a look at first letter. First letter is how we can select the first letter of some selection. So I could select the first letter of every paragraph.

p {
  background-color: #ff5a5f;
  color: #fff;
  font-size: 30px;
  padding: 10px;
}
/* Psudeo elements */
p::first-letter {
  font-size: 40px;
  color: #000;
}

as you can see it modifies the first letter of every paragraph element in document. The first line of text, all of that is purple.

And then one more we'll take a look at is ::selection. So this is going to apply to any part of the document that we have highlighted. It doesn't have to be any part of the document, but any part of some selected elements.

/* Psudeo elements */
p::selection {
  background-color: #767676;
  color: #ccc;
}

So now we get this Greyish selection. So I could also, if I wanted to apply this to the entire document, could do that.

So that's it for our brief intro to pseudo elements. If you are the adventurous type you could take a look at before and after, they are pretty interesting. Somewhat useful pseudo elements do not feel like you need to go learn them right now that you've got a lot on your plate if this is all brand new to you. But I would be remiss if I ignored them entirely.

So if you're curious, take a look.

And that's it. I'm going away bye 👋🏻.

CONCLUSION

I hope we enjoyed this post and that it helps us on our way to becoming better front-end developers.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.