Foundation Block Grid und nth-Kind Selektor

Ich arbeite gerade an einem WordPress Theme mit FoundationPress. Ich verwendete das Sass Block Grid, um Posts eines benutzerdefinierten Post-Typs anzuzeigen, zwei in einer Zeile.Foundation Block Grid und nth-Kind Selektor

Jetzt möchte ich den geraden verschiedene Stile (margin-top) geben. Versucht, es mit dem N-Kind-Selektor zu tun, aber es scheint nicht zu funktionieren. Alle Spalten werden als ungerade oder in einem 1,3,5 und so weiter Zyklus angezeigt.

Ist das ein häufiges Problem? Oder ist das Blockraster nicht so gemacht, dass es mit Selektoren wie diesem funktioniert?

Vielen Dank im Voraus :) Sabine

Quelle

2017-03-23 Sabine

Können Sie sich bitte zeigen, welche Art von Selektor benutzt du? Schauen Sie sich dieses Beispiel: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child_odd_even –

@NadezhdaSerafimova I Fundamentblock Grid bin mit, und das: n-te-Kind-Selektor. Wenn Sie (ungerade) alle Spalten einfügen, erhalten Sie das Styling, wobei (sogar) keiner von ihnen das Styling bekommt. Der Code ist unten in einer neuen Antwort, wegen der Formatierung. – Sabine

Es scheint, wie ich die Lösung gefunden zu haben: Ich verwenden: n-of-Art (2n) statt: n-Kind (2) und es funktionierte und es dann geklickt: D Ich habe das Kind Ding mit der Verwendung auf li, wenn ich es auf ul verwendet hätte.

Oh Mann, arbeitete viel zu viel heute. Mein schlechter ...

Wie auch immer, Vielen Dank für Ihre Zeit :)

Die HTML:

<ul> 
    <li> 
    <a href="#linktopost"> 
     <span class="imgborder"><img src="#linktoimage" alt=""></span> 
     <span class="projectinfo"> 
     <p class="skills">Skillset 1</p> 
     <h3>Project 1</h3></span> 
    </a> 
    </li> 

    <li> 
    <a href="#linktopost"> 
     <span class="imgborder"><img src="#linktoimage" alt=""></span> 
     <span class="projectinfo"> 
     <p class="skills">Skillset 2</p> 
     <h3>Project 2</h3></span> 
    </a> 
    </li> 

    <li> 
    <a href="#linktopost"> 
     <span class="imgborder"><img src="#linktoimage" alt=""></span> 
     <span class="projectinfo"> 
     <p class="skills">Skillset 3</p> 
     <h3>Project 3</h3></span> 
    </a> 
    </li> 

    <li> 
    <a href="#linktopost"> 
     <span class="imgborder"><img src="#linktoimage" alt=""></span> 
     <span class="projectinfo"> 
     <p class="skills">Skillset 4</p> 
     <h3>Project 4</h3></span> 
    </a> 
    </li> 
</ul>

Die CSS:

ul{ 
    margin-top: 50px; 
    } 

    ul li{ 
    list-style-type: none; 
    margin-top: 60px; 
    } 

    ul li:nth-of-type(2n){ 
    margin-top: 100px; 
    }

Quelle

2017-03-23 10:23:05 Sabine

Foundation Block Grid und nth-Kind Selektor

Antwort

Verwandte Themen