Your SlideShare is downloading. ×
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
CSS SELECTORS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS SELECTORS

220

Published on

CSS selectors are extremely handy tools which a designer can have, using them performant can give you maximum performance and usability.

CSS selectors are extremely handy tools which a designer can have, using them performant can give you maximum performance and usability.

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • v
  • Transcript

    • 1. CSS . SELECT ORS# . = : ` > Anush Mozilla Kerala Meet up
    • 2. Anush http://techstream.org
    • 3. CALICUT
    • 4. CSS . SELECT ORS# . = : ` > Anush Mozilla Kerala Meetup
    • 5. HOW WE GOT HERE http://dribbble.com/shots/1122967-Rubber-Evolution
    • 6. Web Standards Moment
    • 7. <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>
    • 8. Ohh
    • 9. <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>
    • 10. Removed presentational Aspects
    • 11. <div class=“name”>Name</div> CSS .name{ font-family: arial, sans-serif; color:red; }
    • 12. When do start
    • 13. CSS PROFILES
    • 14. CSS 1 CSS 2 CSS 2 CSS Level 2 Revision 1 CSS 3 CSS 4
    • 15. Let Push it
    • 16. ID SELECTOR
    • 17. <div id=“container”> …… </div> #container{ … … }
    • 18. CLASS SELECTOR
    • 19. <div class=“container”> …… </div> .container{ … … }
    • 20. Which one should I prefer..?
    • 21. Which one should I prefer..? Ask yourself
    • 22. TYPE SELECTOR
    • 23. <a href=“http://...”> …</a> <a href=“http://...”> …</a> a { color: red; }
    • 24. ADJACENT SELECTOR
    • 25. <h2>head</h2> <p>lorem ipsum dolor</p> h2 + p { font-weight: bold; }
    • 26. DESCENDANT SELECTOR
    • 27. #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>
    • 28. CHILD SELECTOR
    • 29. li > ul { color: #fff; } <ul> <li> Sub Menu 1 </li> <li> Sub Menu 2 </li> <li> Sub Menu 3 </li> </ul>
    • 30. UNIVERSAL SELECTOR
    • 31. * { color: #D0D0D0; } <html> any element in here </html>
    • 32. ATTRIBUTES SELECTOR
    • 33. a[href="http:// mozilla.org "] { color: #000; } <a href=“http://mozilla.org”>Mozilla</a>
    • 34. input[type="email"], input[type="tel"] { ………… } <input type=" email " value=" reset "> <input type=" tel " value="submit">
    • 35. • [title] • [href="foo"] • [href*="nettuts"] • [href^="http"] • [href$=".jpg"] • [type="email"] • [type="tel"] • [type="submit"] • [type="reset"]
    • 36. PSEUDO-CLASSES SELECTOR
    • 37. a:hover { color:green; } <a href=“http://mozilla.org”>Mozilla</a>
    • 38. • :active • :hover • :visited • :checked • :after • :before • :not(selector) • ::pseudoElement • :nth-child(n) • :nth-last-child(n) • :first-child • :last-child
    • 39. EFFECTIVE UTILIZATION SELECTOR http://www.flickr.com/photos/detune/215354076/
    • 40. html body .main #menu a{ … } #menu a{ … }
    • 41. BROWSERS READ FROM RIGHT TO LEFT
    • 42. 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>
    • 43. 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>
    • 44. 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>
    • 45. 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>
    • 46. 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>
    • 47. browser Support....
    • 48. Upgrade your browser please....
    • 49. Thank you anushbmx anushbmx anushbmx E-mail: anush@techstream.org Phone : 88910 ANUSH Mozilla Kerala Meet up, Cochin, 2013 Special thanks to Mozilla & Saurabh for this opportunity.
    • 50. Thank you anushbmx anushbmx anushbmx Mozilla Kerala Meet up, Cochin, 2013 CSS SELECTORS

    ×