-->

CSS selector tutorial

CSS selector tutorial

CSS selector tutorial


CSS Selector Tutorial:

This tutorial is very important in CSS, learning it is half the work.

The CSS selector is called the heart of CSS. There are different types of selectors, with which you can select the elements of the HTML page and after selecting, you can style as you wish. You have to have a very deep and clear idea about CSS selector.

HTML element:


Attributes:


Rule set or rule: Always listen to the rule (css rule). In the image below, the selector and the declaration block match a rule. This means that the CSS that is written for selecting an HTML element is a rule.

The rest of what you need to know is clearly shown in the picture below. Take a good look at which is the selector, which is the property, which is the value, etc. very well. Throughout the CSS tutorial, only 3 things will be discussed

Selector: 


A CSS rule is written to select or target an HTML element. Select / target with the value of id, class attribute given in the element. More details in the following lines.

Properties: 

CSS has hundreds of properties. One by one work is done such as "background-color" property can be used to color the background of any element. "font-family" can be used to determine the font of the element, etc.

Value: 

Each property has a specific value. The more you memorize these properties and what the value of these properties will be, the better you will be able to do. However, when you become a professional by working, hundreds of properties and their values ​​are memorized.

h4{background-color:white; font-size:12px;}
p{color:red;}


Here h4, p are the selectors, h4 will select what is inside the <h4> </h4> of the HTML page or say h4 will select the element.

Where the second bracket starts after h4 and where the second bracket ends before p is the declaration block.

Everything inside the second bracket is a declaration.

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

And the whole means starting from h4 and its second bracket where the rule or rule set ends.

The code above 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, as the following code will make all HTML elements red.

{margin:0; padding:0;}

This needs to be done, it puts more pressure on the browser

ID selector

Class selector

Type selector

p{background-color:orange;} a{color:maroon;}


p, a is the type selector here. The p selector will select all the <p> elements of the HTML page and their background color will be orange and a selector will select all the links in the HTML and make the color brown.

Descendant selector:


li a {text-decoration: none; color:red;}


HTML File



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

Suppose you want to target an element under li element then you have to write CSS rule like above. The effect of this code will go to a just under li of your html page.

pseudo class:


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

: link,: visited,: hover,: active These are the pseudo class. Suppose if you apply this rule for the above HTML file, then the color of all links and visited links will be blue. And the color of hover and active link will be red. If you could write like this.

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

Adjacent Selector:


h2+h3{color:lime;}

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

<h2> Then if there is any other element and then there is <h3> then the color of this <h3> will not be lime because it is not after the immediate of <h2>.

Looking at h2 + h3, it cannot be assumed that the color of both will lime, only <h3> will change.

direct children:


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


If you apply this rule to the above HTML page, then there will be a border on the ul element, but there will be no border on the Children text even though it is in another ul.

Attribute selector:

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

If your HTML file has the following line, select the attribute of the <img> element with the code above and its border will be 5 pixels and the border color will be black.


Grouping selector:

If you want to style the same for more than one element, then use the grouping selector. Suppose you want all the headings and links of your page to be the same color, then you can write as below.

 h1,h2,h3,h4,a{color:red;3}


Suppose the ID of a div on your page is menu (id = "menu") and you want to redden all the links and headings inside this div.

#menu a, #menu h1,#menu h2, #menu h3{color:red;3.}


It would be a mistake to write #menu a, h1, h2 ... like this.


Having more than one rule for an element in a CSS file will have the effect of whichever is more specific. E.g.

a{color:#f00;}#menu ul li a{color:blue;}


The color of a above is red but the a inside the #menu div is not red but blue because it has been changed to #menu ul li a. If you remove the 4-6 numbered line then all the links will look red.

However, if you want to apply the rule of line 1-3 for all the links, then "! Important" should be given after the semicolon. Important should not be used unless absolutely necessary.

a{color:#f00!important;}
#menu ul li a{color:blue;}
Facebook Comments

Follow by Email