[CSS] meer selectors

[Clay]

Geen vraag eerder een mogelijke discussie;
In CSS 1 en 2 heb je o.a. de descendant, child en (direct) adjacent sibling selectors, respectievelijk [spatie], > en +. In CSS3 (laatste versie alweer van 13 november 2001 stokoud) komt daar de indirect adjacent sibling bij, de tilde, ~. Die selecteert b.v. bij:

Cascading Stylesheet:

h1 ~ p {
   ...
}

een p die (niet direct, maar ergens) na een h1 komt, mits ze in dezelfde parent zitten. Beetje wazig, maar verder vast wel handig. Maar, zou het ook niet handig zijn om b.v. iets als dit te hebben ("parent selector" oid):

Cascading Stylesheet:

ul < li {
   ...
}

Dus de child selector, maar dan omgekeerd. Dit zou dan LI's selecteren, maar alleen die waarin een UL direct genest is. En dan zou je b.v. als je een menu zou bouwen met css geen classes nodig hebben om LI's die wel submenu's bevatten te onderscheiden van LI's die dat niet hebben.

In diezelfde lijn zou ik deze ook wel handig vinden ("previous sibling selector" oid):

code:

pre - h1 {
   ...
}

Wat een H1 zou selecteren, mits deze direct gevolgd wordt door een een PRE. Een echt nuttige toepassing hiervoor heb ik nog niet echt kunnen bedenken maar ook hiermee zou je b.v in een list navigatie de A's kunnen selecteren in een LI die gevolgd worden door een UL, om b.v. wederom subnavigatie links te onderscheiden van gewone.

De + en > zijn heel leuk, maar ze selecteren altijd het element dat als laatste genoemd wordt, en dat wil je misschien juist niet altijd, vandaar dit idee. Als ik de specs goed lees is het namelijk ook niet mogelijk zonder deze fictieve selectors bij de elementen te komen die ze zouden selecteren. Je hebt b.v. wel de :contains pseudo-class, maar die slaat alleen op textuele content, en volgens mij kan je ook niet iets bouwen met de :not() pseudo.

Het is verder puur bedoeld als stof tot nadenken aangezien CSS3 zelf nog niet echt in de praktijk grootschalig bruikbaar is. Het vreemde van deze selectors zou ook zijn dat je ze als uitzondering op de rest deels van rechts naar links zou moeten lezen, maar verder lijken ze mij eigenlijk best handig...

[chris]

Ik heb hier ook wel eens over nagedacht, en het zou inderdaad érg handig zijn in sommige gevallen. Maar ik gebruik de > selector eigenlijk ook nooit, ondanks dat ie zo handig is. 2 woorden: Internet Explorer. Maar dit terzijde.

Verder lijkt het me wel dat je snel een zooi van je code gaat krijgen, omdat je met negatieve selectors werkt. En misschien is deze link wel interessant.

[Justice]

Yup die mogelijkheden heb ik ook al vaak nodig gehad. Het feit dat je met de selectors bepaalde tags selecteert, maar dat je daarmee geen invloed kan uitoefenen op andere tags vind ik erg irritant.

[Clay]

chris, die link is idd wel interessant De :subject selector die ze daar noemen staat alleen niet meer op w3 . Door daarop wat verder te zoeken kwam ik wel hier terecht, dat ziet er ook al een stuk bruikbaarder uit. Maar die :matches() pseudo komt verder ook alleen maar voor in lists en dit txt'tje

[Verwijderd]

Die "previous sibling selector" zou een pseudo-class daar ook niet misschien op zijn plaats zijn?
Dus ipv:

code:

pre - h1 {
   ...
}

Zoeits als dit:

code:

h1:next(pre)

Edit:
die :matches pseudo-class doet al ongeveer hetzelfde (en meer)
Dan zou het:

code:

h1:matches(+ pre)

worden
http://lists.w3.org/Archi...w-style/1999Nov/0241.html

Wat ik ook graag zou zien is een manier om een bepaalde groep van siblings te selecteren om daar een border omheen te zetten.

Nu doe ik vaak dit:

code:

<div class="hoofstuk">
<h2>Voorbeel</h2>
<div class="inhoud">
<p>stukje tekst</p>
<p>stukje tekst</p>
<p>stukje tekst</p>
</div>
</div>

en gebruik ik de classes "hoofdstuk" en "inhoud" om de boel te stylen. Het liefst zou ik die divs ook kwijtraken en css pseudo-elementen gebruiken.
::outside bestaat al, maar een groep siblings selecteren kan dus niet.

[ Voor 78% gewijzigd door Verwijderd op 17-01-2004 20:09 ]

[creative8500]

Verwijderd schreef op 17 januari 2004 @ 19:55:
en gebruik ik de classes "hoofdstuk" en "inhoud" om de boel te stylen. Het liefst zou ik die divs ook kwijtraken en css pseudo-elementen gebruiken.
::outside bestaat al, maar een groep siblings selecteren kan dus niet.

Wil jij niet iets als:

code:

<body>
  <section>
    <h>Voorbeeld</h>
    <p>stukje tekst</p>
    <p>stukje tekst</p>
    <p>stukje tekst</p>
  </section>
</body>

Cascading Stylesheet:

body > section > p { border: solid lightcoral; border-width: 0 1px; }
body > section > p:first-of-type { border-top-width: 1px; }
body > section > p:last-of-type { border-bottom-width: 1px; }

[Verwijderd]

Die tilde wordt inmiddels ondersteund door Mozilla een andere grote doorbraak was de ondersteuning van ":hover + element". Denken jullie nu ook aan DL elementen voor navigatie, waarbij DD als toelichting dient bij ":hover"?

CSS3 selectors wordt trouwens nog geen REC, omdat het afhangt van andere modules.

[Verwijderd]

Verwijderd schreef op 18 januari 2004 @ 17:58:
Die tilde wordt inmiddels ondersteund door Mozilla een andere grote doorbraak was de ondersteuning van ":hover + element". Denken jullie nu ook aan DL elementen voor navigatie, waarbij DD als toelichting dient bij ":hover"?

Zeker mogelijk -- al zou ik daar zelf eerder een title-attribuut voor gebruiken. Alhoewel, met de DT/DD combinatie kun je grafisch wel meer kanten op. De :hover + element constructie zal waarschijnlijk ook handig zijn om bepaalde schaduw-effecten te realizeren -- waarbij de schaduw van het "gehoverde" element over het volgende element heenvalt.

[creative8500]

Blues: De :hover + element constructie zal waarschijnlijk ook handig zijn om bepaalde schaduw-effecten te realizeren -- waarbij de schaduw van het "gehoverde" element over het volgende element heenvalt.

[Clay]

kan toch? als je bv een h1 en een p zonder margin tegen elkaar aanplakt, dan kan je met een :hover op de h1 een "schaduw" als bg in de p zetten.

Die ~ en :hover + zijn heel leuk, maar ik zou eigenlijk wel wat meer over die :matches willen weten Kan er niet al te veel over vinden, en het is eigenlijk het antwoord op dit topic imo.

[chris]

Clay schreef op 18 januari 2004 @ 21:39:
Die ~ en :hover + zijn heel leuk, maar ik zou eigenlijk wel wat meer over die :matches willen weten Kan er niet al te veel over vinden, en het is eigenlijk het antwoord op dit topic imo.

Volgens mij is dat enkel in een draft en op mailinglists besproken/aangegeven, maar heeft het w3c om mij onduidelijke redenen dit niet ingevoerd. Maar het zou inderdaad dé oplossing zijn voor het probleem.

Gelukkig is er wel een workaround voor (met classes werken), maar het blijft imho érg jammer dat ze dit niet geimplementeerd hebben.

[Verwijderd]

Persoonlijk ben ik met het W3C eens

Het CLASS attribuut is uitgevonden om een element iets te veranderen zodat je het uniek kunt selecteren. Het dient dus om tekortkomingen in HTML aan te vullen. In XML heb je zo'n CLASS attribuut dus niet nodig, aangezien je dan een ander element gebruikt.

Een voorbeeld met huidig HTML:

code:

<pre><p>Gedicht</p></pre>

<pre><code>Code</code></pre>

Je wilt de PRE dus stijlen afhankelijk van de inhoud, nietwaar? Want daarom gebruik je zo'n soort selector. In HTML kun je dus geen onderscheid maken tussen gedichten en code-voorbeelden (niet altijd), tenzij je een CLASS toevoegt. Op dat moment onderscheiden de twee PRE elementen zich van elkaar. In X(HT)ML zou je <blockcode> en <poem> (sp?) gebruiken waardoor het hele probleem wegvalt.

Aangezien CSS op de lange duur voor meer Markup Languages geschikt moet en niet alleen voor (X)HTML is het gedaan (denk ik dan).

[Verwijderd]

@creative8500,
Inderdaad, dat zou kunnen, maar wat als ik elke keer een groep van 3 paragrafen wil stijlen in een section met 30 paragrafen? Volgens mij kan dat niet op die manier, of misschien toch wel op een nogal omslachtige wijze.
Ik geloof dat ik hier iets heb gevonden over zo'n syntax, maar dit is nooit in een publieke draft geweest.
http://lists.w3.org/Archi...w-style/2000Oct/0057.html
Zie onderaan: :children(1,100)

Ik heb geprobeerd of ik een menu zoals in een standaard programma puur in css zou kunnen maken.
Daarbij is -volgens mij- die :matches pseudo-class o.a onontbeerlijk: ul:matches(:focus){display:block;} , om een menu-item open te laten totdat de focus is verschoven naar (een ander onderdeel van) de pagina. Maar dan moet ik ook kunnen bepalen dat de focus in het menu kan verschuiven met de muis.

[Verwijderd]

De vraag is of dat nog te maken heeft met CSS. Maar die lijn is sowieso al 'troebel' vanwege dingen als ":hover" en ":active".

[creative8500]

Martijn22 had wéér het gevoel dat iets niet kon met CSS3...

Wil jij niet iets als:

code:

<body>
  <section>
    <h>Voorbeeld</h>
    <p>stukje tekst</p> <!-- 6n-5 -->
    <p>stukje tekst</p> <!-- 6n-4 -->
    <p>stukje tekst</p> <!-- 6n-3 -->
    <p>stukje tekst</p> <!-- 6n-2 -->
    <p>stukje tekst</p> <!-- 6n-1 -->
    <p>stukje tekst</p> <!-- 6n   -->
    <p>stukje tekst</p> <!-- 6n-5 -->
    <p>stukje tekst</p> <!-- 6n-4 -->
    <p>stukje tekst</p> <!-- 6n-3 -->
    <p>stukje tekst</p> <!-- 6n-2 -->
    <p>stukje tekst</p> <!-- 6n-1 -->
    <p>stukje tekst</p> <!-- 6n   -->
  </section>
</body>

Cascading Stylesheet:

body > section > p:nth-of-type(6n-5),
body > section > p:nth-of-type(6n-4),
body > section > p:nth-of-type(6n-3) { background: lime; }

[Verwijderd]

Ja, dat klopt Maar nou wil ik een border om de drie p's. Dat lukt ook nog wel heel aardig, zie ik al voor me.
Maar stiekem wil ik eigenlijk om die 3 p's een box van het type table-cell zetten:

code:

body > section:nth-children(1n,3n)::outside{display:table-cell;}
body > section:nth-children(1n,9n)::outside{display:table-cell;}
body > section { display:table;}

nth-children is een zelf in elkaar gebakt misbaksel om een wat meer generieke :children(1,3), :children(4,6), etc te krijgen.

[ Voor 4% gewijzigd door Verwijderd op 19-01-2004 20:57 ]

[Verwijderd]

Zoiets leek mij ook leuk om te hebben idd. Ik had zelf zoiets bedacht:

code:

::combine(selector & selector & selector)

Of iets dergelijks. Probleem is dat zoiets ook onmogelijke dingen kan gaan doen en voor performance voor browsers etc...

Een andere selector:

code:

p:if(~address)

p:if(>span)

etc.

[BtM909]

Clay schreef op 17 januari 2004 @ 18:03:
Geen vraag eerder een mogelijke discussie;

Cascading Stylesheet:

ul < li {
   ...
}

code:

pre - h1 {
   ...
}

Ik heb hier inderdaad ook aan gedacht, waarom dit soort opties niet beschikbaar (zullen) zijn.

Zal daar een gedachte achterliggen? Zo ja, welke

[ Voor 50% gewijzigd door BtM909 op 21-01-2004 13:50 ]