CSS .
SELECT
ORS# . = : ` >
Anush
Mozilla Kerala Meet up
Anush
http://techstream.org
CALICUT
CSS .
SELECT
ORS# . = : ` >
Anush
Mozilla 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...
Ohh
<table>
<tr><td><img src=“xxx.jpg”><img
src=“tab.jpg”></td><font face=“arial,sans-serif”
size=“4” color=“red”><strong>Name...
Removed
presentational
Aspects
<div class=“name”>Name</div>
CSS
.name{
font-family: arial, sans-serif;
color:red;
}
When do start
CSS PROFILES
CSS 1
CSS 2
CSS 2 CSS Level 2 Revision 1
CSS 3
CSS 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
adip...
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="su...
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...
EFFECTIVE UTILIZATION SELECTOR
http://www.flickr.com/photos/detune/215354076/
html body .main #menu a{ … }
#menu a{ … }
BROWSERS READ FROM
RIGHT TO LEFT
a {color: green;}
#menu { width:300px; margin: 10px auto; }
#menu ul { text-align:center; }
#menu ul li { list-style:none;...
a {color: green;}
#menu { width:300px; margin: 10px auto; }
#menu ul { text-align:center; }
#menu ul li { list-style:none;...
a {color: green;}
#menu { width:300px; margin: 10px auto; }
#menu ul { text-align:center; }
#menu ul li { list-style:none;...
a {color: green;}
#menu { width:300px; margin: 10px auto; }
#menu ul { text-align:center; }
#menu ul li { list-style:none;...
a {color: green;}
#menu { width:300px; margin: 10px auto; }
#menu ul { text-align:center; }
#menu ul li { list-style:none;...
browser Support....
Upgrade your browser please....
Thank you
anushbmx anushbmx anushbmx
E-mail: anush@techstream.org
Phone : 88910 ANUSH
Mozilla Kerala Meet up, Cochin, 2013...
Thank you
anushbmx anushbmx anushbmx
Mozilla Kerala Meet up, Cochin, 2013
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
×

CSS SELECTORS

568 views

Published on

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
568
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • v
  • CSS SELECTORS

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

    ×