Wat selecteer ik met deze css?

Status
Niet open voor verdere reacties.
bron

bron

Moderator
Forumleiding
Moderator
Lid geworden
13 aug 2013
Berichten
5.376
Beste helpers,

Ik heb een vraag over de '*' selector. Het gaat om deze html
Code: 
<div class="container">
  <div class="box">
    <div class="box">Tekst 1</div>
  </div>
  <div class="box">
    <div class="box">Tekst 2</div>
  </div>
  <div class="box">
    <p class="box">Tekst 3</p>
  </div>
</div>
met deze css
Code: 
.container {
  width: 720px;
  height: 240px;
  margin: 30px auto;
}
.container .box {
  float: left;
  width: 220px;
  height: 220px;
  margin: 10px;
  padding: 0;
  background: red;
}
.container > *:first-child {
  background: blue;
}
.box .box {
  width: 200px;
  height: 200px;
  background: yellow;
}
Html en css heb ik W3C gevalideerd, dat is okee.
Mijn vraag: wat selecteer ik met .container > *:first-child ? Zal dit in elke browser werken? Ik weet dat er handiger manieren zijn maar in mijn layout heb ik iets dergelijks als dit nodig. Bij W3C en W3schools kan ik hier niets over vinden.

Alvast bedankt voor je hulp!!
 
*Het ">" teken duidt op een parent-child relatie.

Links staat de parent, rechts staat het child.
Dus
Code: 
div > p
duidt op een <p>-element dat een direct kind van het <div>-element is.

* betekent "alle elementen"

:first-child betekent een element dat als eerste een kind-relatiue met een parent-element heeft.


De totale combinatie van
Code: 
.container > *:first-child
slaat dus in dit geval op het eerste element (van welke aard dan ook) dat een direct kind is van .container.
Dat is in jouw voorbeeld de eerste <div class="box">.
 
Gewoon even aanvullen voor de browser-compatibiliteit: die lijn zal werken in zo goed als alle moderne browsers, aangezien alle selector-onderdelen nog onderdeel zijn van CSS2.1, wat ondertussen al even bestaat.

Gedetailleerdere info over specifieke browser-bugs en ondersteuning (ook voor mobiele browsers): http://caniuse.com/#feat=css-sel2
 
.container > *:first-child { }
Klik om te vergroten...
Bedankt Tecsman voor je uitleg. Nadat ik deze selectie op papier had gezet begon ik te twijfelen of dit cross-browser genoeg is. Ik had het gevoel dat *:first-child in sommige browsers misschien anders zou gaan werken dan ik in gedachten had. Ik ga er mee aan de slag :)

Bedankt Johantrax voor je info en het linkje. De hoofdlayout wil ik inderdaad css2.1 backwards compatible hebben :)

Een ander vraagje, ook weer een selectie die ik in de layout css2.1 wil hebben.
Omdat soms de classes .item1 .item2 .item3 .item4 enz... worden gebruikt, wil ik deze classes in 1 keer kunnen selecteren met
Code: 
*[class[COLOR="#FF0000"][B]~=[/B][/COLOR]"item"]  of  *[class[COLOR="#FF0000"][B]|=[/B][/COLOR]"item"]
of iets dergelijks, maar zonder resultaat. Wat gaat hier niet goed?

Extra info: ik kan dit oplossen met class="item item1" maar dit wil ik niet omdat het voor de gebruiker makkelijk moet zijn om in de wysiwyg editor maar 1 class te hoeven kiezen.
 
Laatst bewerkt:
De oplossing in extra info is ook de reden waarom het 'fout' gaat.
Code: 
*[class~="item"]
matched alle elementen waarbij in de whitespace-separated list de waarde "item" exact voorkomt (dus matched niet op "item1")
Code: 
*[class|="item"]
matched alle elementen waarbij de waarde van het attribuut exact overeenkomt, of meteen gevolgd wordt door een koppelteken (-). Je zou dus eventueel je eigen classes kunnen hernoemen naar item-1, item-2, ... en deze regel gebruiken.
Nadeel is wel dat dit het begin van de value-list is, dus wanneer er meerdere classes op je element horen, moet deze class als eerste staan!

Wat je zoekt is waarschijnlijk de substring match:
Code: 
*[class*="item"]
maar deze is natuurlijk wel onderdeel van CSS3

Als je aantal verschillende items vastligt, houdt niks je natuurlijk tegen om je stijlregel (ookal wordt die voor jou dan langer en moeilijker te onderhouden) van de eerste variant gebruik te laten maken:
Code: 
*[class~="item1"], *[class~="item2"], *[class~="item3"] {
/* we've got style */
}
Iets meer typwerk voor jou, maar in je wysiwyg hoeven je gebruikers dan inderdaad slechts 1 classe te selecteren.

Ik heb een voorbeeldje met de verschillende selectors op jsfiddle geplaatst voor je: http://jsfiddle.net/yajLzuq2/

EDIT: attr*=val lijkt wel vrij goed ondersteund te zijn (zelfs IE7), dus mss kan je hier dan toch voor gaan als je niet strict CSS2.1 wenst te volgen: http://caniuse.com/#feat=css-sel3
 
Laatst bewerkt:
Johantrax, geweldig!
Wederom bedankt voor je uitleg en de jsfiddle. Het was dus de whitespace :(
Mooi dat class*="item" prima in css2.1 browsers wordt ondersteund.

Ik zocht inderdaad een soort stripos(class, "item", 0)

In de css heb ik nu heeeeel veel regels kunnen terugbrengen tot
Code: 
*[class*="item"] { ... }
*[class*="item"]:first-child { ... }
De code hierboven werkt goed in bijvoorbeeld IE8-IE11 en de laatste Chrome.
In je linkje http://caniuse.com/#feat=css-sel3 staat bij Known issues:

"Android 4.3 and lower (together with older WebKit browsers) have issues when combining pseudo classes with adjacent or general sibling selectors."

Weet jij of de 2e regel ervoor kan zorgen dat ik in Android deze issues heb?
 
Laatst bewerkt:
Daar kan ik helaas weinig aan bijdragen, mijn kennis over (en ervaring met) mobiele browsers is helaas te beperkt. Tijd om testpubliek te zoeken ;)
 
Inmiddels heb ik gezocht wat hiermee wordt bedoeld:

Browser: Android tot 4.4 ; Safari tot 5.1 ; Chrome tot 13
Bug: Adjacent (+) sibling en General (~) sibling doen vreemd of niets als ze samen met een pseudo class worden gebruikt.

Voorbeelden:
div:first-child + p { ... }
a:hover ~ span { ... }

Ik gebruik deze 2 selectors zo goed als niet. Voor mijn layout zal het geen probleem opleveren.

De vraag is opgelost. Bedankt voor je info en hulp!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan