CSS SELECTORS

CSS .SELECTORS# . = : ` >

AnushMozilla Kerala Meet up

Anushhttp://techstream.org

CALICUT

CSS .SELECTORS# . = : ` >

AnushMozilla Kerala Meetup

HOW WE GOT HERE

http://dribbble.com/shots/1122967-Rubber-Evolution

Web Standards Moment

<table><tr><td><img src=“xxx.jpg”><img

src=“tab.jpg”></td><font face=“arial,sans-serif” size=“4” color=“red”><strong>Name</strong> </font><br></tr></table>

Ohh

<table><tr><td><img src=“xxx.jpg”><img

src=“tab.jpg”></td><font face=“arial,sans-serif” size=“4” color=“red”><strong>Name</strong> </font><br></tr></table>

Removed presentational

Aspects

<div class=“name”>Name</div>

CSS

.name{font-family: arial, sans-serif;color:red;

}

When do start

CSS PROFILES

CSS 1CSS 2CSS 2 CSS Level 2 Revision 1

CSS 3CSS 4

Let Push it

ID SELECTOR

<div id=“container”> …… </div>

#container{……

}

CLASS SELECTOR

<div class=“container”> …… </div>

.container{……

}

Which one should I prefer..?

Which one should I prefer..?Ask yourself

TYPE SELECTOR

<a href=“http://...”> …</a><a href=“http://...”> …</a>

a { color: red;

}

ADJACENT SELECTOR

<h2>head</h2><p>lorem ipsum dolor</p>

h2 + p { font-weight: bold; }

DESCENDANT SELECTOR

#content a{ color: #ff0;

}

<div id= "content"> <a href=‘’#’’>anchor 1 </a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href=‘’#’’> Suspendisse</a> </p></div>

CHILD SELECTOR

li > ul { color: #fff;

}

<ul> <li> Sub Menu 1 </li> <li> Sub Menu 2 </li> <li> Sub Menu 3 </li> </ul>

UNIVERSAL SELECTOR

* { color: #D0D0D0;

}

<html>any element in here

</html>

ATTRIBUTES SELECTOR

a[href="http:// mozilla.org "] { color: #000; }

<a href=“http://mozilla.org”>Mozilla</a>

input[type="email"], input[type="tel"] { …………}<input type=" email " value=" reset "><input type=" tel " value="submit">

• [title]• [href="foo"]• [href*="nettuts"]• [href^="http"]• [href$=".jpg"]• [type="email"]• [type="tel"]• [type="submit"]• [type="reset"]

PSEUDO-CLASSES SELECTOR

a:hover { color:green;}

<a href=“http://mozilla.org”>Mozilla</a>

• :active• :hover• :visited• :checked• :after• :before• :not(selector)• ::pseudoElement• :nth-child(n) • :nth-last-child(n)• :first-child• :last-child

EFFECTIVE UTILIZATION SELECTOR

http://www.flickr.com/photos/detune/215354076/

html body .main #menu a{ … }

#menu a{ … }

BROWSERS READ FROMRIGHT TO LEFT

a {color: green;}#menu { width:300px; margin: 10px auto; }#menu ul { text-align:center; }#menu ul li { list-style:none; display:inline-block; }#menu ul li a { color:#fff; }

<div id=“menu”><ul> <li><a href=“#”>Menu 1</a></li> </ul>

</div>

<a href=“#”> Link</a>



</div>




</div>




</div>




</div>


browser Support....

Upgrade your browser please....

Thank you

anushbmx anushbmx anushbmx

E-mail: [email protected] : 88910 ANUSH

Mozilla Kerala Meet up, Cochin, 2013

Special thanks to Mozilla & Saurabh for this opportunity.

Thank you

anushbmx anushbmx anushbmx

Mozilla Kerala Meet up, Cochin, 2013

CSS SELECTORS

Internet

CSS SELECTORS