CSS szelektorok  m.zimmermann@mito.hu
CSS szelektorok*              :root                  :link            ::first-lineE              :empty                 :v...
Alap szelektorok• *• E• .class• #id
•    E[att]                                         att•    E[att="val"]         Az elem att                              ...
•    E[att*="val"]   Az elem att                                          val.    E[att^="val"]   Az elem att             ...
•     img:not([alt]) { border: 5px solid #f00; }•   Social media linkek               extra classok     a[href*="facebook....
• EF    F E-• E>F   F E-nek gyermeke, azaz k         vetlen• E+F• E~FIE7-                    li + li = li:not(:first-child...
Pszeudo-                                         vs pszeudo-elemek• Pszeudo-                             ":"              ...
pszeudo-•                      pszeudo-    :root          A                             .    FONTOS :root = html, de :root...
pszeudo-:only-child      Az                 :only-child = :first-child:last-child:only-of-type                 gyereke.   ...
pszeudo-    :nth-child(an+b)    :nth-last-child(an+b)                         .    :nth-of-type(an+b)    :nth-last-of-type...
pszeudo-dd:first-of-type {                        pl. dd:first-child:nth-child(6)      /* a 6. elem */:nth-last-child(6)  ...
pszeudo-• Dinamikus pszeudo-   :link    FONTOS: csak olyan anchorra                           href   :visited             ...
pszeudo-• Form                               pszeudo-  :enabled :disabled           Form  :checked                        ...
Full CSS checkbox                                   radio)<label><input type="checkbox"><span>Elfogadom</span></label>labe...
Full CSS checkbox                                  radio)/* ha nincs kikapcsolva a checkbox, hoverlabel:hover input[type="...
Full CSS tabok<div class="tabs">    <a id="tab1" href="#tab1">Tab 1</a>    <a id="tab2" href="#tab2">Tab 2</a    <a id="ta...
Full CSS tabok/*               ne ugorjon az elemhez */.tabs { position: fixed; }/* a tab.tabs > a:link,.tabs > a:visited ...
Full CSS tabok/* egyes tabok                            */.tabs section[id^="tabcont"] {     position: absolute; top: 0; l...
Pszeudo-elemek•    ::first-letter    ::first-line         Block•    ::before    ::after    A pszeudo-    A tartalom a cont...
Pszeudo-elemek•    ::selection                                                 (IE9+)                  Firefoxban ::-moz-s...
Pszeudo-elem•    ol { counter-reset: mycounter; }    li { position: relative; margin-left: 0 0 0 40px; }    li:before {   ...
Pszeudo-elem•                      tooltip    <a href="http://facebook.com" data-tooltip="Gipsz Jakab">Like</a>           ...
Pszeudo-elem    /* hover              a tooltip           link        pszeudo-elemben */    a[data-tooltip]:hover:before {...
• W3C (http://www.w3.org/TR/css3-selectors/)• SitePoint (http://reference.sitepoint.com/css/selectorref)• Kompakt (http://...
Upcoming SlideShare
Loading in...5
×

CSS szelektorok

611

Published on

Egzotikus CSS szelektorok áttekintése

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
611
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS szelektorok

  1. 1. CSS szelektorok m.zimmermann@mito.hu
  2. 2. CSS szelektorok* :root :link ::first-lineE :empty :visited ::first-letter.class :first-child :focus ::before#id :last-child :hover ::after[foo] :first-of-type :active ::selection[foo="bar"] :last-of-type :enabled EF[foo~="bar"] :only-child :disabled E>F[foo^="bar"] :only-of-type :checked E+F[foo$="bar"] :nth-child(n) :indeterminate E~F[foo*="bar"] :nth-last-child(n) :target[foo|="en"] :nth-of-type(n) :lang(fr) :nth-last-of-type(n) :not(s)
  3. 3. Alap szelektorok• *• E• .class• #id
  4. 4. • E[att] att• E[att="val"] Az elem att val. myid div[id="myid"] ugyanazt az objektumot adja meg, de #myid E[att~= "val"] Az elem att whitespace- ekkel tagolt lista, amelyben szerepel val.
  5. 5. • E[att*="val"] Az elem att val. E[att^="val"] Az elem att val-lal E[att$="val"] Az elem att val-ra• E[lang|="en"] Az elem lang en vagy en-. E[lang|="en lang="en"], E[lang^="en-"] { ... }
  6. 6. • img:not([alt]) { border: 5px solid #f00; }• Social media linkek extra classok a[href*="facebook.com"] { background: url(icon-fb.png } a[href*="twitter.com"] { background: url(icon-tw.png }• a[href^="mailto:"]:before { content:" } a[href$=".pdf"]:before { background: url(icon-pdf.png }• class input[type="text"] { ... } input[type="checkbox"] { ... }IE7-
  7. 7. • EF F E-• E>F F E-nek gyermeke, azaz k vetlen• E+F• E~FIE7- li + li = li:not(:first-child) = li:nth-last-child(n+1) not nth-last-child csak IE9+)
  8. 8. Pszeudo- vs pszeudo-elemek• Pszeudo- ":" . .• Pszeudo-elem "::" Olyan tartalmat . . pszeudo-elemekre vonatkozik (ld. ::selection), IE- - modernizr .Mindig arra az elemre vonatkoznak, amihez csatoltuk, ld. :first-child.
  9. 9. pszeudo-• pszeudo- :root A . FONTOS :root = html, de :root html :root :empty elem. Whitespace sem lehet benne, komment igen. pl. <p><!-- comment --></p> p:empty { display: none; } ( empty mindig igaz! Pl. img = img:empty)
  10. 10. pszeudo-:only-child Az :only-child = :first-child:last-child:only-of-type gyereke. :only-of-type = :first-of-type:last-of-type:first-child:last-child gyerek, a elem sem.:first-of-type:last-of-type gyerek.
  11. 11. pszeudo- :nth-child(an+b) :nth-last-child(an+b) . :nth-of-type(an+b) :nth-last-of-type(an+b) a b - Az nth-child(1). odd even ( = 2n ).A text-node-ok .
  12. 12. pszeudo-dd:first-of-type { pl. dd:first-child:nth-child(6) /* a 6. elem */:nth-last-child(6) a 6. elem */:nth-child(n+3):nth-child(-n+8) /* a 3 a 8-ig */:nth-child(n+2):nth-child(odd):nth-last-child(n+2) { .. } a2 a2 */ nthmaster.com pszeudo- csak IE9- first-child -
  13. 13. pszeudo-• Dinamikus pszeudo- :link FONTOS: csak olyan anchorra href :visited .• pszeudo- :focus :hover :active Javasolt link-visited-focus-hover-active . a :focus:hover az elem a
  14. 14. pszeudo-• Form pszeudo- :enabled :disabled Form :checked radio checkbox). :indeterminate Nem- DOM-• :lang(fr) illeszt, mint az |= szelektor, de• :target Ha az URL-ben van hash id- .• :not(s) Csak lehet ( pszeudo- ). :not():not .
  15. 15. Full CSS checkbox radio)<label><input type="checkbox"><span>Elfogadom</span></label>label input[type="checkbox"] { display: none; } checkbox label egy sorban legyen */label input[type="checkbox"] + span,label input[type="checkbox"] + span:before { display: inline-block; }/* checkbox -label input[type="checkbox"] + span:before { content: "2713"; text-indent: -9999px;}
  16. 16. Full CSS checkbox radio)/* ha nincs kikapcsolva a checkbox, hoverlabel:hover input[type="checkbox"]:not(:disabled) + span:beforelabel input[type="checkbox"]:checked + span:before { text-indent: 3px; }label input[type="checkbox"]:disabled + span,label input[type="checkbox"]:disabled + span:before { cursor: default; } pszeudo- - Javascriptes
  17. 17. Full CSS tabok<div class="tabs"> <a id="tab1" href="#tab1">Tab 1</a> <a id="tab2" href="#tab2">Tab 2</a <a id="tab3" href="#tab3">Tab 3</a> <article> <section id="tabcont1 section> <section id="tabcont2 section> <section id="tabcont3 section> </article></div>- a tab tab-
  18. 18. Full CSS tabok/* ne ugorjon az elemhez */.tabs { position: fixed; }/* a tab.tabs > a:link,.tabs > a:visited { display: inline-block; height: 20px; ... }.tabs > a:hover { ... }/* tab targetje */.tabs > a[id^="tab"]:target { ... }/* tab tartalmak wrappere */.tabs article { clear: both; position: absolute; left: 0; top: 20px;}
  19. 19. Full CSS tabok/* egyes tabok */.tabs section[id^="tabcont"] { position: absolute; top: 0; left: 0; display: none; ...} tabtabot wrapper objektuma jelenjen meg */#tab2:target ~ article > #tabcont2 { display: block; }#tab3:target ~ article > #tabcont3 { display: block; }/* tab#tabcont1 { display: block; }#tab2:target ~ article > #tabcont1,#tab3:target ~ article > #tabcont1 { display: none; }
  20. 20. Pszeudo-elemek• ::first-letter ::first-line Block• ::before ::after A pszeudo- A tartalom a content statikus lehet, hanem (open-quote|close-quote), a valamilyen .
  21. 21. Pszeudo-elemek• ::selection (IE9+) Firefoxban ::-moz-selection.
  22. 22. Pszeudo-elem• ol { counter-reset: mycounter; } li { position: relative; margin-left: 0 0 0 40px; } li:before { position: absolute; left: -40px; content: counter(mycounter); counter-increment: mycounter; }
  23. 23. Pszeudo-elem• tooltip <a href="http://facebook.com" data-tooltip="Gipsz Jakab">Like</a> tooltipet */ a:hover { position: relative; } /* hover pszeudo-elemben */ a[data-tooltip]:hover:after { display: block; position:absolute; left:0; top:100%; color: #333; font-size: 20px; content:"25b4"; width: 100%; padding-left: 10px; margin-top: -15px; }
  24. 24. Pszeudo-elem /* hover a tooltip link pszeudo-elemben */ a[data-tooltip]:hover:before { content: attr(data-tooltip); position: absolute; left: 0; top: 100%; color: #fff; font-size: 12px; white-space: nowrap; background: #333; padding: 4px 8px; margin-top: 3px; }• @media print { a[href]:after { content: " (" attr(href) ") "; } }
  25. 25. • W3C (http://www.w3.org/TR/css3-selectors/)• SitePoint (http://reference.sitepoint.com/css/selectorref)• Kompakt (http://kimblim.dk/css-tests/selectors/)• Alapos (http://www.quirksmode.org/css/contents.html)• Selectivizr (http://selectivizr.com/)• IE7.js (http://code.google.com/p/ie7-js/)• eCSStender (http://ecsstender.org/)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×