In this post is about CSS selector and how it woks. Following is explanation of most of the selector that is used in CSS.
In the following first is css example and than html code on which it will work, so to try by yourself create html page and put the css as well as related Html and see the result. In most of the select I provided demo link where you can visit and see the result.
In below post you might find some new CSS selector that are the part of new CSS3. All of the below examples and demo tried by me on latest Chrome version.
.Class -: Select all the element with given class name.
CSS
.MyIntro
{
font:15px arial,sans-serif;
color:red;
}
Use
<div class="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>
#id -: Select all the element with given id name.
CSS
#MyIntro
{
font:15px arial,sans-serif;
color:red;
}
Use
<div id="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>
Point to Note :
You can have more than one element having same classname in HTML page but you can have only one element with the ID.
HTMLElement - Select all the html element which name is given.
CSS
p
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>
HtmlElement HtmlElemnt - Select all the html element which are in html element.
CSS
div p
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p>My name is Pranay Rana.</p>
<Span>
<p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>
in this example all p element inside div get highlighted with read color, but p element outside div doesnt get affected.
HtmlElement > HtmlElemnt - Select all the html element which are child of html element.
CSS
div > p
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p>My name is Pranay Rana.</p>
<Span>
<p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>
in this example all p element which are child of div get highlighted with read color, but p element which are not child of div doesnt get affected.
HtmlElement + HtmlElemnt - Select all the html element which are immediate after html element.
CSS
div + p
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p>My name is Pranay Rana.</p>
</div>
<p>I am working as Soft Engg.</p>
<p> data </p>
in this example p element which is immediate after div get highlighted with read color, in this example "I am working as Soft Engg." this text get highlighted.
HtmlElement ~ HtmlElemnt - Select all the html element which are precedes html element.
CSS
div ~ p
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p>My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p>My Demo Page.</p>
in this example p element which is precedes div get highlighted with read color, in this example "I am working as Soft Engg." and "My Demo Page." text get highlighted.
[attribute] - Select all the html element which is having attribute.
CSS
[data-name]
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p data-name="pranay">My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>
in this example any element which is having attribute "data-name"div get highlighted with red color, in this example "My name is Pranay Rana." and "My Demo Page." text get highlighted.
[attribute = data] - Select all the html element which is having attribute value equal to data.
CSS
[data-name = 'demo']
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p data-name="pranay">My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>
in this example any element which is having attribute "data-name" and value = "demo" get highlighted with red color, in this example "My Demo Page." text get highlighted.
[attribute ^= data] - Select all the html element where attribute value begins with data.
CSS
[data-name ^= 'pra']
{
font:15px arial,sans-serif;
color:red;
}
So with the above html when apply this "My name is Pranay Rana." text is get highlighted because its "data-name" attribute value begining with "pra".
[attribute $= data] - Select all the html element where attribute value end with data.
CSS
[data-name ^= 'pra']
{
font:15px arial,sans-serif;
color:red;
}
So with the above html when apply this "My name is Pranay Rana." text is get highlighted because its "data-name" attribute value ending with "nay".
[attribute *= data] - Select all the html element where attribute value contains data.
CSS
[data-name *= 'rana']
{
font:15px arial,sans-serif;
color:red;
}
So with the above html when apply this "My name is Pranay Rana." text is get highlighted because its "data-name" attribute value contains "rana".
[attribute ~= data] - Select all the html element where attribute value contains word data.
CSS
[data-name ~= 'page']
{
font:15px arial,sans-serif;
color:red;
}
Use
<div >
<p data-name="pranay_page">My name is Pranay Rana.</p>
<span>
<p> data </p>
</span>
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo page">My Demo Page.</p>
in this example any element where attribute "data-name" value contains word = "page" get highlighted with red color, in this example "My Demo Page." text get highlighted
:first-child - Select first element (first child) of parent.
CSS
li:forst-child
{
font:15px arial,sans-serif;
color:red;
}
Use
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
in this example "item1" element get highlighted with red color.
:last-child - Select last element (last child) of parent.
CSS
li:last-child
{
font:15px arial,sans-serif;
color:red;
}
Use
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
in this example "item4" element get highlighted with red color.
:nth-child(n) - Select all each element which n the child of parent.
CSS
li:nth-child(2)
{
font:15px arial,sans-serif;
color:red;
}
Use
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
in this example "second li" element get highlighted with red color, in this example "item2" text get highlighted
:nth-child(n) - Select all each element which last n the child of parent counting from bottom .
CSS
li:nth-child(2)
{
font:15px arial,sans-serif;
color:red;
}
Use
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
in this example "second last li" element get highlighted with red color, in this example "item3" text get highlighted
:only-child - Select child element which only child of parent .
CSS
p:only-child
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p> pragraph 1</p>
</div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>
in this example "paraghaph 1" element get highlighted with red color,which is only child of div element.
:first-of-type - Select first element of given type which is first comes under parent element.
CSS
p:first-of-type
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
</div>
in this example "paragraph 1" element get highlighted with red color.
:last-of-type - Select last element of given type which is last comes under parent element.
CSS
p:last-of-type
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
</div>
in this example "paragraph 1" element get highlighted with red color, that means here "pragraph 1" is first element of type p under div.
:nth-of-type(n) - Select nth element of given type which comes at nth place under parent element.
CSS
p:nth-of-type(2)
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>
in this example "paragraph 2" element get highlighted with red color, that means here "pragraph 2" is 2th element of type p under div.
:nth-last-of-type(n) - Select nth last element of given type which comes at nth place under parent element from last.
CSS
p:nth-last-of-type(2)
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>
in this example "paragraph 3" element get highlighted with red color, that means here "pragraph 3" is last element of type p under div from last.
:only-of-type - Select only element of given type which comes under parent element.
CSS
p:only-of-type
{
font:15px arial,sans-serif;
color:red;
}
Use
<div>
<p> pragraph 1</p>
</div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>
in this example "paragraph 1" element get highlighted with red color, because p is only element of given type.
:empty - Select element which is empty i.e. donent have any child.
CSS
div:empty
{
width:100px;
height:20px;
background:red;
}
Use
<div></div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>
in this highlight all text in the document with red color.
::selection - highlight the text with the color selected.
CSS
::selection
{
background:green;
}
Use
<div> <p> pragraph 1</p> </div>
<div>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
</div>
in this highlight all text with green which get select in document.
:not(HTMLElement) - it not apply the style to the HTMLElement specified.
CSS
:not(span)
{
font:15px arial,sans-serif;
color:red;
}
span
{
color:black;
}
Use
<p> pragraph 1</p>
<p> pragraph 2</p>
<p> pragraph 3</p>
<p> pragraph 4</p>
<span> span data</span>
in this highlight all text which is in p element i.e. not apply style to span element.
:enable - select to all enable element.
:disable - select to all disable element.
CSS
:input[type="text"]:enabled
{
background:green;
}
input[type="text"]:disabled
{
background:red;
}
Use
Name: <input type="text" value="Pranay Rana" /><br>
Country: <input type="text" disabled="disabled" value="India" />
here name is get highlighted with red color and country box is get highlighted with green.
Conclusion
Most of the selector are new here those are part of CSS3, I hope that helpful to understand well. I covered most of the CSS selector here but if there is something missing please place comment below regarding it.
Leave comment if you have any query or if you like it. Pelease report if any link is not working or broken.
