How to choose a perfect selector in CSS

I am presenting here my self As Vinod Kumar Madamanchi. This is my First article in entire my life I'm damn pretty sure I can turn all tough thing to as much I can display short and easiest way to learn for all beginner's.

Before reading this lesson everyone should know these basic abbreviation's.

HTML-Hyper Text Mark up Language, First appeared in 1993 CSS-Cascading Style Sheets, First appeared in 1996, JS- Java Script, First appeared in 1995

With out any lagging we can enter a lesson with short and easy understanding.

1. What is CSS selector?

   A CSS selector can select the DOM of HTML element's then you can paint entire webpage what you like and what you want.

2. How many selectors are present in CSS and how I can choose the selector?

   Most and commonly there are 6 type of selectors using in live.

   1. Element selector, 2. ID selector, 3. Class selector, 4. Universal selector, 5. Group selector and 6. custom input type selector.

Here I will show you how to use these selectors with shortest and easy way. Here after you can brush up with all selectors.

If you know Emmet then your life is easer to write better HTML tags, for example I have given Emmet shortcut is below

div.container>h1.first-headind{your h1 content goes here}+p.para{Your para =graph goes here}.

This below example code I have used all 5 selector:(ex: Element selector(h1), Class selector(.class), ID selector(#code), Universal selector(*) and group selector(div> h1, p + input)

1. Universal Selector(*) it targets the entire web page

* {
  margin-top: 10px;
  background-color: #8f8f8f;
}

2 Element Selector(div or all of HTML tags) it targets the inside the elements content.

div {
  height: 100vh;
  width: 7200px;
}

3 Group Selector(div>h1>p or div+h1+p) it targets the inside elements content from parent to child and using(+)applying styles to all elements.

div > h1, h1+p {
  background-color: red;
  color: white;
  font-size: 30px;
}

4 ID Selector(#para) you can targets HTML elements using ID selector.

#para {
  color: #ffffff;
}

5 Class Selector(.para) you can targets HTML elements using ID selector.

.first-heading {
  background-color: red;
  color: white;
  font-size: 30px;
}

6 Input Selector(input[type="text"]) it targets inside the text input field only.

input[type="text"] {
  font-size: 40px;
  border: none;
}

Note-1: After every CSS value use only semicolon(;) not comma(,).
Note-2: Remember one thing every property have a value so use correct property with correct value.

You can see above result I have targeted all possible common selectors.

---

For fast learnings you can find below links for cheat sheets of HTML Emmet and CSS

HTML & CSS Cheat sheet Click here to download

Deep learn about CSS selectors- read this MDN docs

--Thank You for reading