CSS selectors - we must know

1. Universal Selector: *

*{margin:0; padding:0}

Most of the designers use * selector to remove the margin and padding, but we should avoid it because it is too heavy. *.class1 and .class are equivalent. *.#content and # content are equivalent.

2. Descendant selectors: X Y

 li  a{ text-decoration:none; }

If you don’t want to apply your style with the entire anchor element but only within a li element then you can use it. It will apply to all those anchor tags which are inside li elements.

3. Child Selector: X > Y

div > span{ margin:0; color: gray; }

It will apply to all those span elements which are inside a div element.

.class1 {color:gray; padding: 5px;}
.class1 > span{color:red;}

You can also use the class child selector, it will apply to those span which are the child of any elements with class name “class1”.

<div id=”div1”>
   <div class=”class1”>
       <span>Show colored text!</span>
      <div>
          <span> This text will not be colored!</span>
      </div>
  </div>
</div>

In this example only first span with text “Show colored text” will show in red and the next span will not be colored because that is not the child of class “class1”.

4. Adjacent sibling selectors: E1 + E2

div + p { text-indent: 0 } 

In this example when a p element immediately follow the div element then that will not be indented, e.g.

<div>Div Content</div>
<p>will be not be indented because above rule will apply</p>
<p>On this p element nothing will be applied</p>

We can also use the selector class like this

div.classx + p {text-indent: 0 } 

it will apply to those p elements which are immediately follow the div with class “classx”.

5. Attribute selectors: [att=val]

To change the background color of all DIV elements which have any title, use

div[title] {background-color:blue;}

To change the background color of all those DIV elements which have class named 'divclass', use

div[class=divclass] {background-color:red;}

Similarly you can use for any attribute of any elements.

6. Class selectors: .classname

Class selector apply to only those elements which specify the the class name.

.personal{font-weight:bold; color:green;}

It will apply to only those elements where you will specify the class attribute to personal, e.g.

<div class="personal">
    It's text will be bold and color green
</div>

7. ID selectors: #elementID

#city{font-size:13pxl color:gray;}

and use it like this

<p id='city'>Jersey City</p>

You need to be careful that on a page only one element can use this id because no two element have the same id otherwise it will give error.

8. Pseudo-classes

8.01 pseudo-classes

a:link{ color: blue;}     /* Selects all unvisited links */
a:visited{ color: red;}   /* Selects all visited links */
a:active{ color: green;}  /*  Selects the active link */
a:hover{ color: gray;}  /*  Selects links on mouse over */

8.02 :first-child pseudo-class

p:first-child{font-size: 15px;}

It will apply to all those p elements which are the first child of any parent element element.

<div>
   <p>it's font will be 15px</p>
   <p>it is not the first child of any element so will not used</p>
</div>

If you want to capitalize every first child elements of type P inside a DIV then you can use

div > p:first-child{text-transform:capitalize;}

8.03 :before and :after pseudo-elements

Suppose we want to put *Note: * text before the content of P element having class note then use

p.note:before { font-weight:bold;  content: "Note: " }

<p class="note">This is the text without note with note.</p>

it will render - Note: This is the text without note with note.

Suppose we want to put our website name after every heading for those elements which have class name 'siteheader' like "Content Header :: Website Name then we can create the class like this

.siteheader:after { font-size:17px; font-weight:bold; content: ' : : Website Name'; }

<div class="siteheader">My First Heading<div>

Output: My First Heading : : Website Name

Other blogs you may like

6 Lesser Known Things about CSS

![alt text][1] CSS keeps updating itself, in a way that you need to keep up with the changing features and tones of this stylesheet. You need to know the new syntax, and also the no-code methods that you can ideally use. Here you will be introduced to some of the lesser known facts of CSS that... By Deepa Ranganathan   On 25 Sep 2015  Viewed: 844

5 CSS Customizations for Your Wordpress Website

<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan   On 06 May 2015  Viewed: 419

Rotating banner simplest way with jquery and css

Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi   On 18 Apr 2015  Viewed: 7,428

Show faded image and clear on mouse hover

To show blurred, faded or washed-out image by using CSS and clear effect on mouse over on the image we need to use simply two CSS opacity and filter: alpha See following image, by default all will be faded on page load and once user will mouse over on any image that will look like the third... By Jason Olivera   On 06 Apr 2013  Viewed: 1,909

What is !important in CSS and what is the purposse of it?

As we know CSS styles works from top to bottom, suppose you have created two class with the same name or define the style of any element at two places, which one will apply on your page, can you guess which one will apply, yes you are right the last one because CSS works from top to... By Mike .Net   On 28 Jan 2013  Viewed: 496