• Like
CSS szelektorok
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Published

Egzotikus CSS szelektorok áttekintése

Egzotikus CSS szelektorok áttekintése

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
502
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

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

Transcript

  • 1. CSS szelektorok m.zimmermann@mito.hu
  • 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. Alap szelektorok• *• E• .class• #id
  • 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. • 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. • 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. • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Pszeudo-elemek• ::selection (IE9+) Firefoxban ::-moz-selection.
  • 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. 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. 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. • 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/)