✔ Pseudo Element :first-child oder Alternative

[SebastianG]

Hallo,

ich komme hier nicht weiter und brauch dringend CSS-Hilfe. Meine HTML Struktur sieht folgendermaßen aus.

<div class="subcolumns">
<div class="c33l">
<div class="subcl_3col"></div>
</div>

<div class="c33l">
<div class="subcl_3col"></div>
</div>

<div class="c33l">
<div class="subcl_3col"></div>
</div>
</div>

ich möchte nun der ersten class "subcl_3col" und der letzten class="subcl_3col" ein eigenes margin geben.
Kann ich das mit first-child und last-child umsetzen? Oder gibt es einen anderen weg?

<style type="text/css">
.subcl_3col {
margin:0 15px;
}
.... Und eben hier First-child oder last-child ...
</style>

Ich danke euch,
lg
Sebastian

 

[SpiceLab]

Möglichkeit Nr.1 (:first-child & :last-child):

.c33l:first-child .subcl_3col {...}
.c33l:last-child .subcl_3col {...}
/* bzw. bei gleichlautenden Eigenschaftswerten */
.c33l:first-child .subcl_3col, .c33l:last-child .subcl_3col {...}

Möglichkeit Nr.2 (:nth-child()):

.c33l:nth-child(1) .subcl_3col {...}
.c33l:nth-child(3) .subcl_3col {...}
/* bzw. bei gleichlautenden Eigenschaftswerten */
.c33l:nth-child(1) .subcl_3col, .c33l:nth-child(3) .subcl_3col {...}

 

[SebastianG]

alles ausprobiert.. nur das nicht DANKE für die schnelle Antwort. Hat perfekt funktioniert.
lg