CSS Selectors 101: Targeting Elements with Precision

Why CSS selectors are needed?

we need css selectors because the target the specific html element of the web page and allow the developer for styling

Element selector?

elment selector means targeting the specific html element . if you select an elment and applied some style on it then in the webpage there are multiple element it then style will apply to all

Class selector?

in the html , if multiple element have same class name , then we use the class selector it make changes in the style in all the element.for example

html

<h1 class=”hello”>content</h1>

<p class=”hello”>content 2</p>

css

.hello{

color:red;

}

ID selector?

every element of the html have the unique id but classes can be multiple

Group selectors?

In the Group selectors we can select the multiple html element, they are separated by the comma. example:

h1,h2{

property:value

}

Descendant selectors?

It is used to match all the element that are nested anywhere within specified ancestor. eg:

 <div class="container">
   <p>Paragraph 1 (direct child)</p>
   <section>
     <p>Paragraph 2 (grandchild)</p>
   </section>
 </div>
 <p>Paragraph 3 (outside the div)</p>

 container p {
   color: blue;
 }

Basic selector priority (very high level)

it has defined a rule if there conflict on the multiple html elment