Wat selecteer ik met deze css?

[bron]

Beste helpers,

Ik heb een vraag over de '*' selector. Het gaat om deze html

<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

.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!!

 

[tecsman]

*Het ">" teken duidt op een parent-child relatie.

Links staat de parent, rechts staat het child.
Dus

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

.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">.

 

[Johantrax]

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

 

[bron]

.container > *:first-child { }

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

*[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.

 

[Johantrax]

De oplossing in extra info is ook de reden waarom het 'fout' gaat.

*[class~="item"]

matched alle elementen waarbij in de whitespace-separated list de waarde "item" exact voorkomt (dus matched niet op "item1")

*[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:

*[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:

*[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

 

[bron]

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

*[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?

 

[Johantrax]

Daar kan ik helaas weinig aan bijdragen, mijn kennis over (en ervaring met) mobiele browsers is helaas te beperkt. Tijd om testpubliek te zoeken

 

[bron]

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!