CSS SELECTORS
•Download as PPTX, PDF•
1 like•667 views
CSS selectors are extremely handy tools which a designer can have, using them performant can give you maximum performance and usability.
More Related Content
What's hot
CSS SELECTORS
- 1. CSS . SELECT ORS# . = : ` > Anush Mozilla Kerala Meet up
- 3. CALICUT
- 4. CSS . SELECT ORS# . = : ` > Anush Mozilla Kerala Meetup
- 5. HOW WE GOT HERE http://dribbble.com/shots/1122967-Rubber-Evolution
- 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>
- 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{ … … }
- 21. CLASS SELECTOR
- 22. <div class=“container”> …… </div> .container{ … … }
- 29. Which one should I prefer..?
- 30. Which one should I prefer..? Ask yourself
- 31. TYPE SELECTOR
- 32. <a href=“http://...”> …</a> <a href=“http://...”> …</a> a { color: red; }
- 37. <h2>head</h2> <p>lorem ipsum dolor</p> h2 + p { font-weight: bold; }
- 42. #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>
- 46. CHILD SELECTOR
- 47. li > ul { color: #fff; } <ul> <li> Sub Menu 1 </li> <li> Sub Menu 2 </li> <li> Sub Menu 3 </li> </ul>
- 52. * { color: #D0D0D0; } <html> any element in here </html>
- 58. a[href="http:// mozilla.org "] { color: #000; } <a href=“http://mozilla.org”>Mozilla</a>
- 59. input[type="email"], input[type="tel"] { ………… } <input type=" email " value=" reset "> <input type=" tel " value="submit">
- 63. • [title] • [href="foo"] • [href*="nettuts"] • [href^="http"] • [href$=".jpg"] • [type="email"] • [type="tel"] • [type="submit"] • [type="reset"]
- 66. • :active • :hover • :visited • :checked • :after • :before • :not(selector) • ::pseudoElement • :nth-child(n) • :nth-last-child(n) • :first-child • :last-child
- 68. html body .main #menu a{ … } #menu a{ … }
- 69. BROWSERS READ FROM RIGHT TO LEFT
- 70. 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>
- 71. 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>
- 72. 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>
- 73. 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>
- 74. 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>
- 76. Upgrade your browser please....
- 77. 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.
- 78. Thank you anushbmx anushbmx anushbmx Mozilla Kerala Meet up, Cochin, 2013 CSS SELECTORS
Editor's Notes
- v