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-"] { ... }
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 .
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 .