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
![]() |
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
By Ali Adravi On 30 Jan, 13 Viewed: 553 |
![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: 835
<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: 411
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,364
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,881
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: 487