Click here to Skip to main content
15,867,289 members
Articles / Web Development / CSS

CSS3 Selector

Rate me:
Please Sign up or sign in to vote.
4.75/5 (27 votes)
5 Jan 2014CPOL6 min read 38.6K   44   14
CSS3 Selector
This Article 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.

Demo


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.

Demo


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.

Demo


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.

Demo


[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.

Demo


[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.

Demo


[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".

Demo


[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".

Demo


[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".

Demo


[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

Demo


:first-child - Select first element (first child) of parent.
CSS
li:first-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.

Demo


: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.

Demo


: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

Demo


:nth-last-child(n) - Select all each element which last n the child of parent counting from bottom .
CSS
li:nth-last-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

Demo


: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.

Demo


: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.

Demo


: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.

Demo


: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.

Demo


: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.

Demo


: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.

Demo


: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.

Demo


::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.

Demo


: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.

Demo


: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.

Demo 

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India

Microsoft C# MVP (12-13)



Hey, I am Pranay Rana, working as a Team Leadin MNC. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5.5 years now.

For me def. of programming is : Programming is something that you do once and that get used by multiple for many years

You can visit my blog


StackOverFlow - http://stackoverflow.com/users/314488/pranay
My CV :- http://careers.stackoverflow.com/pranayamr

Awards:



Comments and Discussions

 
GeneralMy vote of 4 Pin
Muhammad Shahid Farooq28-Aug-16 19:19
professionalMuhammad Shahid Farooq28-Aug-16 19:19 
GeneralMy vote of 5 Pin
Sunasara Imdadhusen21-May-14 21:47
professionalSunasara Imdadhusen21-May-14 21:47 
GeneralThanks Pin
Member 103915467-Jan-14 22:40
Member 103915467-Jan-14 22:40 
QuestionVery useful Pin
Valentino_Lokesh7-Jan-14 6:46
Valentino_Lokesh7-Jan-14 6:46 
GeneralMy vote of 5 Pin
Anurag Gandhi6-Jan-14 2:56
professionalAnurag Gandhi6-Jan-14 2:56 
GeneralMy vote of 5 Pin
Huseyin Atasoy6-Jan-14 2:51
Huseyin Atasoy6-Jan-14 2:51 
GeneralIt is really good Pin
Kashabech1-Jan-14 0:23
Kashabech1-Jan-14 0:23 
GeneralRe: It is really good Pin
Pranay Rana2-Jan-14 0:12
professionalPranay Rana2-Jan-14 0:12 
GeneralMy vote of 5 Pin
itaitai30-Dec-13 23:37
professionalitaitai30-Dec-13 23:37 
GeneralRe: My vote of 5 Pin
Pranay Rana30-Dec-13 23:49
professionalPranay Rana30-Dec-13 23:49 
GeneralMy vote of 5 Pin
Carsten V2.030-Dec-13 22:41
Carsten V2.030-Dec-13 22:41 
GeneralRe: My vote of 5 Pin
Pranay Rana30-Dec-13 23:18
professionalPranay Rana30-Dec-13 23:18 
QuestionScreenshots instead of links? Pin
robert081530-Dec-13 0:42
robert081530-Dec-13 0:42 
AnswerRe: Screenshots instead of links? Pin
Pranay Rana30-Dec-13 1:08
professionalPranay Rana30-Dec-13 1:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.