CSS Selector & it's precedence

I know I'm not right one to tell you that all, let me clear I'm not pro in CSS and stuff. I'm just share which is I know little bit...

And if you know about CSS property than it will work for you, so plz if you doesn't plz read it first...

Firstly I'm talking about CSS selector, CSS selector use you can apply or style a HTML element..

Here I'm discuss some CSS selector which is usually most used

1. Universal selector:- select all elements which is present in document's.

Example:-

*{
    font-size: 14px;
}

Note:- * denoted to all element in document.

2. Element selector or tag selector:- select all elements that given name

Example:-

input{
    font-size:12px;
    padding: 4px;
}

3. Class selector:- select all element that present given class name (using class selector you will use . first and then class name)

Example:-

.bgRed{
    background-color: red;
}

4. Id selector:- select an element based on the value of it's id, it's always use to target a single element because you know that id are unique value hold (using id selector to start with # symbol and then id value)

Example:-

#footer{
    margin-top: 12px;
    padding: 8px;
    font-size: 10px;
}

5. Attribute selector:- Select all element that have given attribute, (you can also use custom attribute to apply a CSS)

Example:-

[inputBox]{
    color: #000000;
    font-weight: bold;
    letter-spacing: 0.3px;
    padding: 2px;
}

6. Group selector:- Group selector is a combination of multiple selector (which is use when we apply a particular CSS on most of elements, here we use more than one selector)

Example:-

#footer, [inputBox], .userReview{
    color: #000000;
    font-size: 16px;
    padding: 4px;
}

7. Combined selector:- Combined selector use when we select a element more precisely

Example:-

input[type="text"]{
    font-size: 8px;
    letter-spacing: 0.3px;
    color: #000000;
}

Note:- here I'm clear one thing don't be assume group selector and combined selector are similar both are totally different. group selector use when we apply a particular CSS on more than one element combined selector use when we target a element more precisely more accurate

8. Child selector:- select all the elements that are children of specified element. specified a children using > symbol.

Example:-

div > p {
    color: #000000;
    font-size: 8px;
}

Note:- plz be focus child selector select only child which direct child. means here only those p tag selected which is direct child of div.

9. Descendant selector:- match all the element which is descendant of specify element. we can specify descendant using space.

Example:-

div p{
    color: #000000;
    font-size: 8px;
}

Note:- look at the example, I take same example which is taken in child selector because, something I clear, child selector select direct child, but descendant selector select direct and indirect child both