CSS szelektorok

m.zimmermann@mito.hu

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/)