[CSS] With selector??

[PdeBie]

Hoi allen,

Zie de volgende html:

HTML:

<div class="menu_style">
<span>......</span>
</div>

<div class="menu_style">
<footer><span>.......</span></footer>
</div>

Op menu_style zit een padding van 20 rondom. Deze wil ik niet op de menu_style waar footer in zit.
Bestaat er iets van een 'with' selector? Zodat ik bijvoorbeeld .menu_style <with(.footer)> : padding 0; kan doen?

Ik heb helaas geen invloed op de gegenereerde HTML.

[Wiebeltje]

Volgens mij gaat dat niet. Je kan hier eens kijken naar alle mogelijke selectors:
http://www.w3schools.com/cssref/css_selectors.asp

Je zou wellicht de padding niet op de menu_style kunnen zetten maar op de span?

Cascading Stylesheet:

.menu_style > span {
    display:block;
    padding: 20px;
}

[PdeBie]

ja dat is een optie, maar dan gaat er nog iets mis met de submenu items zie ik. Maar dat is iets kleins volgens mij. Bedankt!

[NMe]

Wat je hier nodig zou hebben als je het doet op de manier die jij graag wil is een parent selector. Helaas bestaan die echter (nog) niet in CSS. Er wordt al jaren gespeculeerd over het toevoegen van zo'n ding maar door de manier waarop CSS geparset wordt is dat allemaal een stukje lastiger dan het klinkt.

Overigens zou ik dit zelf veel liever zo oplossen:

HTML:

<div class="menu_style">
<span>......</span>
</div>

<div class="menu_style footer">
<footer><span>.......</span></footer>
</div>

Cascading Stylesheet:

.menu_style {
    display:block;
    padding: 20px;
}
.menu_style.footer {
    padding: 0;
}

[Dido]

NMe schreef op maandag 01 september 2014 @ 16:20:
Overigens zou ik dit zelf veel liever zo oplossen:

De TS ook, denk ik... maar die zegt

Ik heb helaas geen invloed op de gegenereerde HTML.

[Whinger]

In dat geval zou je een negatieve margin van 20px op de footer kunnen gebruiken, niet de meest nette oplossing. Maar het zou wel moeten werken. Ik denk dat je anders namelijk toch al gauw richting js oplossingen moet kijken, en dat vind ik persoonlijk nog minder elegant.

Zoiets dus: http://jsfiddle.net/jsLdjugq/

[ Voor 7% gewijzigd door Whinger op 01-09-2014 16:55 ]

[PdeBie]

NMe schreef op maandag 01 september 2014 @ 16:20:
Wat je hier nodig zou hebben als je het doet op de manier die jij graag wil is een parent selector. Helaas bestaan die echter (nog) niet in CSS. Er wordt al jaren gespeculeerd over het toevoegen van zo'n ding maar door de manier waarop CSS geparset wordt is dat allemaal een stukje lastiger dan het klinkt.

Die post van CSS tricks had ik inderdaad ook gevonden.

Over je oplossing: ik heb geen invloed op de gegenereerde html helaas (kant-en-klaar CMS). De oplossing van Wiebeltje werkt overigens wel, dus die heb ik nu toegepast.

[itsleon]

Je kan ook de css zo schrijven

Cascading Stylesheet:

.menu_style ~ .menu_style span{
//hier je ding
}

Hiermee worden alle .menu_style aangepast op de eerste na. Ze moeten overigens wel op het zelfde niveau staan.

[_Thanatos_]

Je zei niet 20 wat, dus ik zeg dat je ems gebruikt

Een (niet dé) oplossing:

Cascading Stylesheet:

.menu_style { padding: 20em; }
.menu_style > footer { margin: -20em; }

/edit
Wat een rare codekleuren tegenwoordig zeg

[ Voor 13% gewijzigd door _Thanatos_ op 03-09-2014 00:03 ]

[NMe]

Dat zei j.devreede in "[CSS] With selector??" ook al. Maar de oplossing van Wiebeltje is wanneer de HTML niet aanpasbaar is toch het mooist.

[PdeBie]

@Thanatos. Het gaat om pixels

@NMe: helaas heb ik geen invloed op de gegenereerde HTML inderdaad. En de oplossing van Wiebeltje doet het perfect. Ook het opvolgende probleem wat ik had heb ik inmiddels kunnen verhelpen.

[Virgil]

En de footer class toevoegen aan de onderste mbv jQuery? Je kan de parent van de footer dan makkelijk selecteren en beïnvloeden.

Hopelijk kan je wel javascript includen?

[PdeBie]

Dat kan wel, maar waarom zou ik nog? Er is al een oplossing aangedragen die werkt.

En om dit nou met jQuery op te lossen? Ik zie de meerwaarde er niet van.