This article will explore some basic CSS selectors in CSS.

(Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is with a simple syntax example and also covers some key terms about the language.

CSS is included in HTML as
<link rel="stylesheet" href="styles.css" />

[This is the way we choose, mostly to keep our CSS and HTML separate, this is an external CSS file imported in HTML]

The styles.css file is in the same file directory as your current HTML. Rel tells what is the relation of styles.css in regards to our HTML file.

There are a few other ways like 1) inline CSS, 2)internal CSS, and 3)external CSS.

Types of selectors present in CSS

1. Universal selector(*) :

They select all the elements that are present in the HTML file.

eg:

1. Individual Selector:

This means if we want to target a single element of HTML like p, h2, or div then this is how we can target it.

eg:

1. Class and ID selector:

   In this method, we can target any HTML in the whole HTML through their classes and ID.

   eg:

   

   1. And selector(chaining of selectors):
      We can chain the selectors such that we can easily segregate the chosen element and apply styles, this comes in handy if we have multiple elements in the HTML and each element has a slightly different class.

      eg:

1. Combined selector:

This technique is useful when we want to apply the same kind of style to multiple elements.
eg:

1. Inside elements:

In this manner, we are targeting only the elements inside some other elements.

eg:

1. Direct child:

This method helps us to target the direct child of an element, only the direct child is affected by this:

eg:

eg 2:

1. Sibling selectors:

We can target an element by indirectly referring it, if want an element adjacent to div tag in our case then we can use the sibling method of targeting.

eg:

1. Psuedo selectors:

These are required to perform some dynamic styling to our html, for example on hover, on mouse click etc. we can use pseudo classes like :hover , :onclick etc. Also, there is something known pseudo elements such as :after, :before etc. These tell us where to display the styling in the html file.

:before puts the styling before [or preceeding the element] and :after puts the styling after the element [after the space of the current element]

What to remember?

If we want to chain pseudo elements to p then we can :

p:before::hover    
//This wont work, as the order of pseudo elements also matter.

In the above technique the style placement[before/after] happens before the desired  action happens, which will break the whole css flow.
for ex: 
Rahul in the park will run.
Rahul will run in the park.
Which of these do u think is correct?
The second sentence.
where will rahul go?
-> in the park
What will rahul do?
-> Run
So we write sentences in english like:
subject[Rahul]-> what action  will the subject do[Run]-> where will the subject perform action?[Park]

We can follow the same concept in CSS like this:
element::type of action[:hover, :onclick etc..] : where?[:before/:after]
so, 
p::hover:before
This works as we can now tell the css to perform some style somewhere, on some action.

we can generalize :
element: psuedo class: pseudo element

eg:

That's all for this article, see you later folks!!