[CSS] Element/class op eerst tegengekomen niveau selecteren

[egonolieux]

Ik zou graag een element/class op een "eerst tegengekomen niveau" selecteren waarbij bepaalde blokken genest zijn.

Neem deze HTML als voorbeeld:

code:

<div class="collection">

    <div class="collection-item">
        <button type="button" class="delete-button">Delete</button>
    </div>

    <div class="collection-item">
        <button type="button" class="delete-button">Delete</button>
    </div>

    <div class="collection-item">

        <div class="collection">

            <div class="collection-item">
                <button type="button" class="delete-button">Delete</button>
            </div>

            <div class="collection-item">
                <button type="button" class="delete-button">Delete</button>
            </div>

        </div>

        <button type="button" class="delete-button">Delete</button>

    </div>

</div>

Een collection element bevat meerdere collection-item elementen waarbij elke collection-item een delete-button heeft.

Stel dat ik van de laatste collection-item de delete-button wil selecteren, dan wil ik niet dat de geneste delete-button mee selecteer. Dit kan eenvoudig met volgende selector: .collection-item:first-of-type > .delete-button.

Maar stel nu dat rond de delete-button een arbitrair aantal containers (meerdere divs bvb) komt te staan, dan kan ik de > selector niet meer gebruiken. Bestaat er een manier om toch enkel de eerste (en niet de geneste) delete-button te selecteren?

[q-enf0rcer.1]

Je weet dat als er een collection in een collection item zit, je weer een niveau dieper gaat, dus dan zou je hier wellicht iets mee kunnen:

.collection-item > .collection + .delete-button { <reset values hier> }

Weet alleen niet of ik het probleem helemaal goed begrijp

[ Voor 19% gewijzigd door q-enf0rcer.1 op 23-11-2017 13:07 ]

[Tsjilp]

code:

.collection-item > div:not(.collection) .delete-button {
  background:red
}

zoiets?

[egonolieux]

Tsjilp schreef op donderdag 23 november 2017 @ 13:24:

code:

.collection-item > div:not(.collection) .delete-button {
  background:red
}

zoiets?

vereist dit niet dat er altijd een div rond de delete-button staat?

q-enf0rcer.1 schreef op donderdag 23 november 2017 @ 13:04:
Je weet dat als er een collection in een collection item zit, je weer een niveau dieper gaat, dus dan zou je hier wellicht iets mee kunnen:

.collection-item > .collection + .delete-button { <reset values hier> }

Weet alleen niet of ik het probleem helemaal goed begrijp

Deze oplossing werkt alleen als er een geneste collectie is, maar dit is dus optioneel.

Wat ik eigenlijk wil is vanuit een collection-item vertrekkende, dat ik de delete-button van deze collection-item selecteer, zonder dat ik die van een mogelijks geneste collectie ook mee selecteer (in dezelfde collection-item).

Wat ik in mijn oorspronkelijke post vergeten vermelden ben, is dat collection-item mogelijks niet de directe child is van form-collection (net zoals delete-button). M.a.w. de child selector > gebruiken is dus niet mogelijk.

Mijn vertrekpunt is eigenlijk dat dit (nog) niet gaat met CSS, maar misschien bestaat er toch een of andere manier dit ik over het hoofd zie.

[mcDavid]

Als je zulke rare constructies moet verzinnen ben je sowieso alleen maar je pagina onnodig traag aan het maken. Geef die button gewoon een classname waar je op stijlt.

[egonolieux]

mcDavid schreef op donderdag 23 november 2017 @ 21:38:
Als je zulke rare constructies moet verzinnen ben je sowieso alleen maar je pagina onnodig traag aan het maken. Geef die button gewoon een classname waar je op stijlt.

Het gaat hem niet om 1 specifieke button, het gaat hem om de button in elke collection item, maar dan zonder de buttons in een collection onder dezelfde collection item (genest).

[Tsjilp]

egonolieux schreef op donderdag 23 november 2017 @ 21:29:
[...]


vereist dit niet dat er altijd een div rond de delete-button staat?


[...]

Dat vroeg je toch ook? dat er div(s) om de button konden staan?

[egonolieux]

Tsjilp schreef op donderdag 23 november 2017 @ 22:15:
[...]


Dat vroeg je toch ook? dat er div(s) om de button konden staan?

Ja, maar ik heb een generische oplossing nodig die ook werkt als er geen divs rond staan.