Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Problem z pseudoklasą :first-child
Forum PHP.pl > Forum > Przedszkole
Asmox
Każdy nagłówek menu w moim szablonie ma mieć ustawione określone marginesy, oprócz jednego - pierwszego. Dlatego postanowiłem użyć pseudoklasy :first-child w celu usunięcia dla niego jakichkolwiek odstępów.
Fragment szablonu, który dotyczy menu, wygląda tak:
  1. <div id="rpanel"> <!--prawy panel, czyli ten odpowiedzialny za menu-->
  2. <img src="./template2/img/panel-top.png" alt="panel">
  3. <div class="caption">Menu</div>
  4. <div class="caption">Menu2</div> <!-- * -->
  5. <div class="caption">Menu3</div>
  6. <ul>
  7. <li><a href="">Strona Główna</a></li>
  8. <li><a href="tag/index">Lista tagów</a></li>
  9. <li><a href="index">Lista stron</a></li>
  10. </ul>
  11. </div>

Znaczenie gwiazdki wytłumaczę za chwilę, jeszcze kod CSS
  1. div#board div#rpanel div:first-child {
  2. margin: 0;
  3. }
  4.  
  5. div#board div#rpanel div.caption {
  6. color: #101010;
  7. font-family: KeiserSousa, Sans, Verdana, sans-serif;
  8. font-size: 36px;
  9. margin: .5em 0;
  10. text-align: center;
  11. }


Duplikaty menu zrobiłem po to, aby sprawdzić, czy w ogóle css się odwołuje do elementów div (przy testach wywaliłem :first-child żeby zobaczyć, czy ogólnie divy przestaną mieć marginesy). Problem jest w tym, że ten pierwszy div, w którym jest nagłówek menu, wcale nie chce się "pozbyć" swoich marginesów. Szukałem różnych rozwiązań na necie, zmieniałem kolejność ułożenia i ciągle nic. Bardzo proszę o pomoc.
Gość
Nie zrobisz tegow ten sposob, aby uzyc first-child musialbys sie pozbyc tego im sprzed pierwszego diva, do poki tam jest to pierwszym dzieckiem nie bedzie div
Asmox
Dzięki za odp, a czy da się tak zrobić, że reguła zastosowała się do pierwszego <div class="caption"></div> bez względu na to gdzie on się znajduje?
lobopol
Nie nie ma takiej opcji. w tym wypadku możesz zrobić:
  1. div#board div#rpanel img+div {
  2. margin: 0;
  3. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.