Jak ostylować div-y za pomocą :nth-child?

[Grzegorz]

Mam następujący kod:

Kod: Zaznacz cały

<div id="container">
      <div id="content">

         <div id="post (jakiś numer id)" class="p (jakiś numer id) post">
         </div><!-- .post -->
         <div id="post (kolejny numer id)" class="p (kolejny numer id) post">
         </div><!-- .post -->
         <div id="post (kolejny numer id)" class="p (kolejny numer id) post">
         </div><!-- .post -->
         <div id="post (kolejny numer id)" class="p (kolejny numer id) post">
         </div><!-- .post -->
         <div id="post (kolejny numer id)" class="p (kolejny numer id) post">
         </div><!-- .post -->
         <div id="post (kolejny numer id)" class="p (kolejny numer id) post">
         </div><!-- .post -->
</div>

Gdzie -(jakiś numer id) jest generowany przez platformę, np. 'e12345', zatem id div-a jest w tym przykładzie następujące 'post e12345'. Jednocześnie następny może być już taki 'post e32745', a następny taki 'post e36685' itd.

Założenie jest taki, aby co 3 'post' był wyświetlany w pojedynczym wierszu w 100% szerokości, zaś pozostałe po dwa w jednej linii po 50% szerokości. Coś takiego:



Chciałem do tego wykorzystać :nth-* z CSS3, co zapisałem tak:

Kod: Zaznacz cały

#container #content:nth-child(3n+1):not(:last-child) .post {
   float: left;
   padding: 0;
   width: 920px;
   margin-right: 20px;
   margin-left: 20px;
   clear: both; }
.post {
   float: left;
   padding-top: 0;
   padding-right: 20px;
   padding-bottom: 0;
   padding-left: 20px;
   width: 440px; }


Roboczy kod całości można podejrzeć tu.

Posiłkowałem się przy tym polskim tłumaczeniami tekstów z Mozilla Hacks, ale najwyraźniej stosuję te właściwości wobec elementów, do których nie działają albo je źle oscylowałem.

Mógłby ktoś wskazać, gdzie popełniam błąd i czy da się ostylować div-y z powyższego przykładu.

[dexter]

Zamieniłbym te deklaracje miejscami, bo teraz bardziej ogólna deklaracja klasy post nadpisuje ci szczegółową deklarację.

[Grzegorz]

Nie bardzo rozumiem... Chodzi o zmianę kolejności w strukturze dokumentu czy o wadliwą kolejność w arkuszu stylu? Mógłbyś pokazać, gdzie konkretnie w kodzie jest błąd lub wkleić poprawny? Czyżby chodziło o to, że w arkuszu stylu zwykłe div-y o klasie '.post' są nadpisywane formowaniem z '#container #content:nth-child(3n+1):not(:last-child) .post'? To powinno wystarczyć dodanie '!important', a to nie przynosi oczekiwanych rezultatów.

[dexter]

W arkuszu stylu. W tej kolejności:
.post
#container #content:nth-child(3n+1):not(:last-child) .post

Bo przecież teraz powtarzające się własności będą nadpisywane (post wykona się zawsze i nadpisze własności z #container, a ty chcesz zrobić coś odwrotnego).

[Grzegorz]

Dzięki za pomoc. Udało mi się rozwiązać problem. Gdyby ktoś borykał się z podobnym problemem, poniżej załączam działający kod:

HTML:

Kod: Zaznacz cały

<div id="container">
   <div id="content">
      <div id="&ENTRY_ID;" class="post"></div>
      <div id="&ENTRY_ID;" class="post"></div>
      <div id="&ENTRY_ID;" class="post"></div>
      ...
   </div>
</div>


CSS:

Kod: Zaznacz cały

#content div.post:nth-child(3n+1) {
   float: left;
   padding: 0;
   width: 920px;
   margin-right: 20px;
   margin-left: 20px;
   clear: both;
}

#content div.post:nth-child(3n+2) {
   float: left;
   padding-top: 0;
   padding-right: 20px;
   padding-bottom: 0;
   padding-left: 20px;
   width: 440px;
   clear: left;
   display: block-inline;
}

#content div.post:nth-child(3n+3) {
   float: left;
   padding-top: 0;
   padding-right: 20px;
   padding-bottom: 0;
   padding-left: 20px;
   width: 440px;
   clear: right;
   display: block-inline;
}