Download - CSS szelektorok
CSS szelektorok
CSS szelektorok
* E .class #id [foo] [foo="bar"] [foo~="bar"] [foo^="bar"] [foo$="bar"] [foo*="bar"] [foo|="en"]
:root :empty :first-child :last-child :first-of-type :last-of-type :only-child :only-of-type :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n)
:link :visited :focus :hover :active :enabled :disabled :checked :indeterminate :target :lang(fr) :not(s)
::first-line ::first-letter ::before ::after ::selection E F E > F E + F E ~ F
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-
• E F 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) { .. } a 2 a 2 */
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:hoveraz 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/)