Witam,
tworzę sobie widok tabelaryczny z następującym układem:
<http://december.com/html/4/element/div.html class="postsDiv"> <http://december.com/html/4/element/div.html class="postRow">1</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="postRow">2</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="postRow">3</http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html>
.postsDiv { width: ~"calc(100% - 100px)"; padding: 20px 50px; text-align: center; } .postRow { background-color: #fff; border-radius: 5px; padding: 15px; margin-bottom: 10px; text-align: left; font-size: 14px; border-bottom: 2px solid transparent; } .postRow:first-child { margin-top:30px; } .postRow:last-child { margin-bottom:30px; }
Hej,
a to nie powinno być tak
.postsDiv:first-child div { margin-top:30px; }
Twój CSS działa poprawnie.
A co za tym idzie, odpowiadając na drugie pytanie, nic nie musisz robić, bo te pseudoklasy zadziałają również na jeden element.
.postsDiv:first-child div { margin-top:30px; }
Być może masz do czynienia ze zjawiskiem margin collapse.
Czy ten blok elementów styka się jeszcze z innymi? Jeśli tak, to dodaj float:left dla .postRow.
.bttn { display: block; min-width: 210px; color: #ffffff; border: none; border-radius: 5px; font-size: 14px; padding: 5px 20px; text-decoration: none; line-height: 30px; cursor: pointer; } .newElement { background: #3498db; border-bottom: 3px solid #2980b9; } .center { text-align: center; margin: auto; }
<http://december.com/html/4/element/div.html class="postsDiv"> <http://december.com/html/4/element/button.html class="bttn center newElement">Dodaj</http://december.com/html/4/element/button.html> <http://december.com/html/4/element/div.html class="postRow">1</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="postRow">2</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="postRow">3</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/button.html class="bttn center newElement">Dodaj</http://december.com/html/4/element/button.html> </http://december.com/html/4/element/div.html>
Gdybyś od razu pokazał cały kod, byłoby łatwiej.
Nie :first-child i :last-child, a :first-of-type i :last-of-type.
Klasa jest brana pod uwagę jednak nie w takim sensie. :first-child to zawsze pierwsze dziecko, czyli w tym przypadku warunek spełni element z taką klasą i pierwszy w kolejności (obydwa warunki spełnione).
Oczywiście rozszerzanie selektora :first-child o klasę przy wyborze nie ma sensu - wystarczy :first-child.
P.S. W :first-of-type oraz :last-of-type, klasa również nie ma sensu.
P.P.S. Dodawanie klasy nie ma sensu w Twoim przypadku.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)