** This tutorial is very important in CSS, it learns half of the work done.

The CSS selector is called the heart of CSS. There are different selectors, all these elements can be selected on the HTML page and after selecting it, you can be styled accordingly. There should be very deep and transparent sense about the CSS selectors. Before working with the selector, some terms should be known as:

HTML Elements


Rule set or rule: The rule (css rule) will always be heard. A rule with the Selector and declaration block in the picture below. Meaning that the CSS code that is written for any HTML element to be written is a rule.

The rest of the information to be known is clearly shown in the picture below. Take a look at which selector, which property, what value, and so on. There will be just three things to discuss in the whole CSS tutorial

Selector: The CSS rule is written for selecting an HTML element or targeting it. Elements can be selected / targeted only by the values given in the id, class attribute of the element. More details on the following lines …

Properties: There are hundreds of properties in CSS. One is done with one by one, such as “background-color” properties and colors of an element can be made in the background. With “font-family” you can set the font for the element and so on.

Value: Each property has specific values. The more the values and values of these properties and properties will be able to work as well as remain as well as possible. But after working professionally, hundreds of properties and their values are kept in mind.


Here h4, p is selector, h4, select the inside of the html page <h4> </ h4> or select the h4 element.

After the h4, the second bracket starts from where this is the declaration block, where the second bracket is finished before p.

The declaration is within the second bracket.

background-color is the property and white is its value.

And the whole meaning is that the rule bracket is starting from h4 and this is the rule or rule set.

The above code has two rules, h4 and p

Below are the names of the different selectors and how they work:

* (Universal Selector)

The Universal Selector selects each element of the HTML page. For example, the following code will redraw the color of all HTML elements.

* {color:red;}

Many people padding, margin here 0


It is inconvenient to do this, because of the pressure on the browser, so many people forbid it.

ID Selector

Class selectors

Type selector


p, a is the type selector here p selectors will select all the <p> elements of the HTML page and their background color will be orange and a selector HTML will select all the links and color will be grayed out.

Descent Selector

li a {
text-decoration: none;

<div id="menu">
 <li><a href="#" title="">CSS</a></li>
<li><a href="#" title="">HTML</a>
 <li> Child </li>  
 <li><a href="#" title="">JS</a></li>
 <li><a href="#" title="">PHP</a></li>
 <li><a href="#" title="">MySQL</a></li>

Suppose you want to target an element under the li element, you should write the CSS rule as above. The effect of this code will be to go to the subfolder of your HTML page just under the li.

Pseudo class

a:link{color:blue;} a:visited { color: blue; } a:hover{color:red;} a:active { color: red; }

: link:: visited,: hover, active: This is the CD code. If this rule is applied for the above HTML file, then the color of all the links and the visited link will be blue and the color of the hover and the active link will be red. If you could write this way.

a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }

Adjacent Selector


Suppose you want to target the <h3> element, only <h3> which is followed by the <h2> imidium. The heading of your HTML page with the code above 3 will be lime if it is after heading 2.

* <h2> If there is any other element and then <h3> then this <h3> color will not be lime because it does not have an amide of <h2>.

* h2 + h3 It can not be assumed that both the colors will be lime, only <h3> will change.

direct children selectors

div#menu> ul { border: 1px solid black; }

If this rule applies to the above HTML page then there will be a border on the ul element, but there will not be a border on the children’s text, though it is in another ul. Because the children’s text is in the ul, it is not direct of the menu ID.


Attribute Selector.

img[src="css selector.jpg"] {
border: 5px solid #000000;

If your HTML file contains the following line, then select the <img> element attribute with the code above it’s border, it will border 5 pixels and border color black.

<img src="/css_selector.jpg" width="510" height="205">

Grouping Selector

If you want to do the same style of multiple elements, use the grouping selector. If you want all the headings and link color of your page, you can write it as follows.


Suppose the ID of a page on your page is menu (id=”menu”), and if you want to reddish all the links and headings in this device then this way

#menu a, #menu h1,#menu h2, #menu h3{

* If you type #menu a, h1, h2 … then it will be wrong.

** In a CSS file, if there are multiple rules for an element which will be more specific then it will have the effect. Such as

#menu ul li a{

Above the color of a color red on the #menu, the inside of the div is a red but not red, rather it has become blue because #menu ul li has changed. If you give 4-6 numeral lines then all links will be red.

** However, if you want to apply the rule of line 1-3, then for all the links, then “! Important” will be given after this semicolon. Important should not be used if not very important.

#menu ul li a{