CSS Selectors Simplified!

CSS Selectors define the elements to which a set of CSS rules apply. there are a lot of CSS Selectors but I am going to tell you the most used selectors in CSS.

Universal Selector

this basically selects every element of the CSS and then whatever property we are going to write, it is going to be applied for Every Single Element in the CSS.

* { 
    color:black;
   }

Element Selector

this is going to make changes to the specific element that we are going to add in the property of CSS. for example here I am changing the width and height of all images.

img { 
    widht: 100px;
    height: 200px;

Selector List

we use this when we need to make changes to the list of elements in the CSS. for example, here I am changing the color of heading 1 and heading 2 to magenta.

h1, h2 { 
color: magenta;
}

ID Selector

here you need to define an ID in the HTML and then you can make changes to that specific id in CSS, for example here I made an id called "logout" in HTML, and then I can call that id in CSS using #

#logout { 
    color: orange;
height: 200px;
}

Class Selector

this is the most commonly used selector in CSS, here we simply make a class in HTML and call it CSS using ".classname". see the example:

.complete { 
    color: green:
}

Descendant Selector

we use this to select the elements which are present inside the main element. for example, I added Links to a List, so to add CSS Property to those links I will type:

li a { 
    color: teal;
}

Direct Child

Select only the li that are the direct child of a div element

div > li { 
    color: white;
}

Attribute Selector

Select all input elements where the type attribute is set to “text”

input[type = "text"] { 
    white: 300px;
    color: yellow;
}

if you want to learn more about CSS Selectors then hit this MDN Link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors