CSS Selectors with examples

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

sample css :

Code Snippet
  1. .MyIntro
  2. {
  3.   font:15px arial,sans-serif;
  4.   color:red;
  5. }

sample html :

Code Snippet
  1. <div class="MyIntro">
  2.     <p>My name is Pranay Rana.</p>
  3.     <p>I am working as Soft Engg.</p>
  4. </div>


#id -: Select all the element with given id name

sample class :

Code Snippet
  1. #MyIntro {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

sample HTML :

Code Snippet
  1. <div id="MyIntro">
  2.     <p>My name is Pranay Rana.</p>
  3.     <p>I am working as Soft Engg.</p>
  4. </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.

Sample CSS :

Code Snippet
  1. p {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p>My name is Pranay Rana.</p>
  3.     <p>I am working as Soft Engg.</p>
  4. </div>


HtmlElement HtmlElemnt - Select all the html element which are in html element.

Sample CSS :

Code Snippet
  1. div p {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p>My name is Pranay Rana.</p>
  3.     <span>
  4.         <p>data </p>
  5.     </span>
  6. </div>
  7. <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.

Sample CSS :

Code Snippet
  1. div > p {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p>My name is Pranay Rana.</p>
  3.     <span>
  4.         <p>data </p>
  5.     </span>
  6. </div>
  7. <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.

Sample CSS :

Code Snippet
  1. div + p {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p>My name is Pranay Rana.</p>
  3. </div>
  4. <p>I am working as Soft Engg.</p>
  5. <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.

Sample CSS :

Code Snippet
  1. div ~ p {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p>My name is Pranay Rana.</p>
  3.     <span>
  4.         <p>data </p>
  5.     </span>
  6. </div>
  7. <p>I am working as Soft Engg.</p>
  8. <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.

Sample CSS :

Code Snippet
  1. [data-name] {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p data-name="pranay">My name is Pranay Rana.</p>
  3.     <span>
  4.         <p>data </p>
  5.     </span>
  6. </div>
  7. <p>I am working as Soft Engg.</p>
  8. <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.

Sample CSS :

Code Snippet
  1. [data-name = 'demo'] {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p data-name="pranay">My name is Pranay Rana.</p>
  3.     <span>
  4.         <p>data </p>
  5.     </span>
  6. </div>
  7. <p>I am working as Soft Engg.</p>
  8. <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.

Sample CSS :

Code Snippet
  1. [data-name ^= 'pra'] {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

So with the above html when apply this "My name is Pranjal Panchal." 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.

Sample CSS :

Code Snippet
  1. [data-name ^= 'jal'] {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

So with the above html when apply this "My name is Pranjal Panchal." text is get highlighted because its "data-name" attribute value ending with "jal".


[attribute *= data] - Select all the html element where attribute value contains data.

Sample CSS :

Code Snippet
  1. [data-name *= 'panchal'] {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

So with the above html when apply this "My name is Pranjal Panchal." text is get highlighted because its "data-name" attribute value contains "pannchal".


[attribute ~= data] - Select all the html element where attribute value contains word data.

Sample CSS :

Code Snippet
  1. [data-name ~= 'page'] {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <div>
  2.     <p data-name="pranay_page">My name is Pranay Rana.</p>
  3.     <span>
  4.         <p>data </p>
  5.     </span>
  6. </div>
  7. <p>I am working as Soft Engg.</p>
  8. <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.

Sample CSS :

Code Snippet
  1. li:first-child {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <ul>
  2.     <li>item1</li>
  3.     <li>item2</li>
  4.     <li>item3</li>
  5.     <li>item4</li>
  6. </ul>

in this example "item1" element get highlighted with red color.


:last-child - Select last element (last child) of parent.

Sample CSS :

Code Snippet
  1. li:last-child {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <ul>
  2.     <li>item1</li>
  3.     <li>item2</li>
  4.     <li>item3</li>
  5.     <li>item4</li>
  6. </ul>

in this example "item4" element get highlighted with red color.


:nth-child(n) - Select all each element which n the child of parent.

Sample CSS :

Code Snippet
  1. li:nth-child(2) {
  2.     font: 15px arial,sans-serif;
  3.     color: red;
  4. }

Sample HTML :

Code Snippet
  1. <ul>
  2.     <li>item1</li>
  3.     <li>item2</li>
  4.     <li>item3</li>
  5.     <li>item4</li>
  6. </ul>

in this example "second li" element get highlighted with red color, in this example "item2" text get highlighted.



:empty - Select element which is empty i.e. donent have any child.

Sample CSS :

div:empty
{
  width:100px;
height:20px;
background:red;
}

Sample HTML :

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

Sample CSS :

::selection
{
  background:green;
}

Sample HTML :

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

Sample CSS :

:not(span)
{
  font:15px arial,sans-serif;
  color:red;
}
span
{
  color:black;
}

Sample HTML :

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

Sample CSS :

:input[type="text"]:enabled
{
background:green;
}
input[type="text"]:disabled
{
background:red;
}


Sample HTML :

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.

Post a Comment