SlideShare a Scribd company logo
1 of 25
Download to read offline
CSS szelektorok


  m.zimmermann@mito.hu
CSS szelektorok


*              :root                  :link            ::first-line
E              :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)
Alap szelektorok
• *

• E

• .class

• #id
•
    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.
•
    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-"] { ... }
•
     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-
• EF    F E-


• E>F   F E-nek gyermeke, azaz k         vetlen


• E+F


• E~F

IE7-
                    li + li = li:not(:first-child) = li:nth-last-child(n+1)
                          not      nth-last-child csak IE9+)
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.
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)
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.
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                                .
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           -
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
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                                  .
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;

}
Full CSS checkbox                                  radio)
/* ha nincs kikapcsolva a checkbox, hover
label:hover input[type="checkbox"]:not(:disabled) + span:before

label 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
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
-
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;
}
Full CSS tabok
/* egyes tabok                            */
.tabs section[id^="tabcont"] {
     position: absolute; top: 0; left: 0;
     display: none; ...
}
                tab
tabot          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; }
Pszeudo-elemek
•
    ::first-letter
    ::first-line         Block


•
    ::before
    ::after

    A pszeudo-
    A tartalom a content                              statikus lehet,
    hanem                 (open-quote|close-quote),                     a
                     valamilyen            .
Pszeudo-elemek
•
    ::selection

                                                 (IE9+)
                  Firefoxban ::-moz-selection.
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;

    }
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;
    }
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) ") "; }
    }
• 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/)

More Related Content

Viewers also liked

วิธีการทำ Cursor ด้วยโปรแกรม flash
วิธีการทำ Cursor ด้วยโปรแกรม flashวิธีการทำ Cursor ด้วยโปรแกรม flash
วิธีการทำ Cursor ด้วยโปรแกรม flashNattawoot Jindakul
 
Kebudayaan logam di indonesia
Kebudayaan logam di indonesiaKebudayaan logam di indonesia
Kebudayaan logam di indonesiaJoko Sriyatno
 
презентация учителя
презентация учителяпрезентация учителя
презентация учителяLenaLoginova
 
Perspektif vol 4_no_1_1_mono
Perspektif vol 4_no_1_1_monoPerspektif vol 4_no_1_1_mono
Perspektif vol 4_no_1_1_monoUmi Doank
 
EMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPR
EMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPREMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPR
EMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPRServiceMesh
 
โครงงามคอมพิวเตอร์
โครงงามคอมพิวเตอร์โครงงามคอมพิวเตอร์
โครงงามคอมพิวเตอร์Nattawoot Jindakul
 
Stimulant Drugs
Stimulant DrugsStimulant Drugs
Stimulant DrugsIan Mayaan
 
pengertian dan sejarah komputer
pengertian dan sejarah komputerpengertian dan sejarah komputer
pengertian dan sejarah komputerDewie Sawitri
 
Kebudayaan logam di indonesia
Kebudayaan logam di indonesiaKebudayaan logam di indonesia
Kebudayaan logam di indonesiaJoko Sriyatno
 
EsP 9 M2 Lipunang Pampolitika
EsP 9 M2 Lipunang PampolitikaEsP 9 M2 Lipunang Pampolitika
EsP 9 M2 Lipunang PampolitikaIan Mayaan
 
Bab i.pptx kelas xi ipa
Bab i.pptx kelas xi ipaBab i.pptx kelas xi ipa
Bab i.pptx kelas xi ipaJoko Sriyatno
 
EsP 9 M1 Kabutihang Panlahat
EsP 9 M1 Kabutihang PanlahatEsP 9 M1 Kabutihang Panlahat
EsP 9 M1 Kabutihang PanlahatIan Mayaan
 

Viewers also liked (17)

วิธีการทำ Cursor ด้วยโปรแกรม flash
วิธีการทำ Cursor ด้วยโปรแกรม flashวิธีการทำ Cursor ด้วยโปรแกรม flash
วิธีการทำ Cursor ด้วยโปรแกรม flash
 
Kebudayaan logam di indonesia
Kebudayaan logam di indonesiaKebudayaan logam di indonesia
Kebudayaan logam di indonesia
 
The art of_the_introductory_call
The art of_the_introductory_callThe art of_the_introductory_call
The art of_the_introductory_call
 
Mychic
MychicMychic
Mychic
 
2013-resume
2013-resume2013-resume
2013-resume
 
презентация учителя
презентация учителяпрезентация учителя
презентация учителя
 
Perspektif vol 4_no_1_1_mono
Perspektif vol 4_no_1_1_monoPerspektif vol 4_no_1_1_mono
Perspektif vol 4_no_1_1_mono
 
คสคคบวซ
คสคคบวซคสคคบวซ
คสคคบวซ
 
Bazaar 2012
Bazaar 2012Bazaar 2012
Bazaar 2012
 
EMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPR
EMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPREMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPR
EMCWorld 2013 -ServiceMesh Agility Platform: Cloud-based DevOps with ViPR
 
โครงงามคอมพิวเตอร์
โครงงามคอมพิวเตอร์โครงงามคอมพิวเตอร์
โครงงามคอมพิวเตอร์
 
Stimulant Drugs
Stimulant DrugsStimulant Drugs
Stimulant Drugs
 
pengertian dan sejarah komputer
pengertian dan sejarah komputerpengertian dan sejarah komputer
pengertian dan sejarah komputer
 
Kebudayaan logam di indonesia
Kebudayaan logam di indonesiaKebudayaan logam di indonesia
Kebudayaan logam di indonesia
 
EsP 9 M2 Lipunang Pampolitika
EsP 9 M2 Lipunang PampolitikaEsP 9 M2 Lipunang Pampolitika
EsP 9 M2 Lipunang Pampolitika
 
Bab i.pptx kelas xi ipa
Bab i.pptx kelas xi ipaBab i.pptx kelas xi ipa
Bab i.pptx kelas xi ipa
 
EsP 9 M1 Kabutihang Panlahat
EsP 9 M1 Kabutihang PanlahatEsP 9 M1 Kabutihang Panlahat
EsP 9 M1 Kabutihang Panlahat
 

CSS szelektorok

  • 1. CSS szelektorok m.zimmermann@mito.hu
  • 2. CSS szelektorok * :root :link ::first-line E :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~F IE7- 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, hover label:hover input[type="checkbox"]:not(:disabled) + span:before label 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; ... } tab tabot 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/)