Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> :first-child i :last-child nie działa
siutek
post 24.10.2017, 19:05:08
Post #1





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Witam,
tworzę sobie widok tabelaryczny z następującym układem:

  1. <div class="postsDiv">
  2. <div class="postRow">1</div>
  3. <div class="postRow">2</div>
  4. <div class="postRow">3</div>
  5. </div>


css:
  1. .postsDiv {
  2. width: ~"calc(100% - 100px)";
  3. padding: 20px 50px;
  4. text-align: center;
  5. }
  6. .postRow {
  7. background-color: #fff;
  8. border-radius: 5px;
  9. padding: 15px;
  10. margin-bottom: 10px;
  11. text-align: left;
  12. font-size: 14px;
  13. border-bottom: 2px solid transparent;
  14. }
  15. .postRow:first-child {
  16. margin-top:30px;
  17. }
  18. .postRow:last-child {
  19. margin-bottom:30px;
  20. }


zapisałem calc w taki a nie inny sposób gdyż do generowania cssa korzystam z lessa


Chciałbym aby nad pierwszym elementem na liście zawsze był margines 30px, ten sam odstęp musi się znajdować pod ostatnim elementem. Dlatego wykorzystałem następujący zapis:

Niestety instrukcje first-child i last-child nie działają :/

Drugie pytanie:

Jak zrobić by mając tylko jeden element z klasą .postRow zastosowanie do niego miała pseudoklasa zarówno first-child jak i last:child? Tak by przy jednym wyświetlanym wierszu nad nim i pod nim był margines?
Go to the top of the page
+Quote Post
NetPax
post 24.10.2017, 19:16:10
Post #2





Grupa: Zarejestrowani
Postów: 33
Pomógł: 1
Dołączył: 30.11.2011

Ostrzeżenie: (0%)
-----


Hej,

a to nie powinno być tak

  1. .postsDiv:first-child div {
  2. margin-top:30px;
  3. }


Ten post edytował NetPax 24.10.2017, 19:16:57
Go to the top of the page
+Quote Post
trueblue
post 24.10.2017, 19:24:05
Post #3





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
siutek
post 24.10.2017, 20:05:46
Post #4





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Cytat(NetPax @ 24.10.2017, 20:16:10 ) *
Hej,

a to nie powinno być tak

  1. .postsDiv:first-child div {
  2. margin-top:30px;
  3. }


Próbowałem tak, tylko zamiast .postsDiv:first-child div wpisałem .postsDiv:first-child .postRow - muszę się ograniczyć tylko do elementów z klasą .postRow, bo mam tez inne divy w tym kontenerze.
Niestety powyższy zapis nie zadziałał jak należy. Skutkiem działania kodu było to, że KAŻDY element z klasą .postRow przyjął wartość z :last-child, czyli margin-bottom:30px;

trueblue: Natomiast mój pierwotny kod, który twierdzisz, że działa, w moim przypadku nie działa wcale. nawet z instrukcją !inportant (tak na wszelki wypadek, bo pierwotnie .postRow ma margin-bottom: 10px;).
divy z klasą .postRow nie mają przypisanych ani instrukcji przeznaczonych dla :first-child ani dla :last-child sad.gif
Go to the top of the page
+Quote Post
trueblue
post 24.10.2017, 20:11:54
Post #5





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
siutek
post 24.10.2017, 20:29:58
Post #6





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Cytat(trueblue @ 24.10.2017, 21:11:54 ) *
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.


Spowodowało to całkowite rozjechanie się elementów wewnątrz divów z klasą .postRow, natomiast one same jak nie miały marginów tak nie mają nadal.
Dodam dla ścisłości, że zarówno nad divami .postRow jak i pod nimi są przyciski <button></button> o następujących klasach:

  1. .bttn {
  2. display: block;
  3. min-width: 210px;
  4. color: #ffffff;
  5. border: none;
  6. border-radius: 5px;
  7. font-size: 14px;
  8. padding: 5px 20px;
  9. text-decoration: none;
  10. line-height: 30px;
  11. cursor: pointer;
  12. }
  13. .newElement {
  14. background: #3498db;
  15. border-bottom: 3px solid #2980b9;
  16. }
  17. .center {
  18. text-align: center;
  19. margin: auto;
  20. }


uściślając więc wygląda to tak:

  1. <div class="postsDiv">
  2. <button class="bttn center newElement">Dodaj</button>
  3. <div class="postRow">1</div>
  4. <div class="postRow">2</div>
  5. <div class="postRow">3</div>
  6. <button class="bttn center newElement">Dodaj</button>
  7. </div>


Nie sądzę by to miało znaczenie, ale idąc Twoim tropem trueblue, tak, divy .postRow stykają się jeszcze z innymi elementami wewnątrz diva .postsDiv.

Ten post edytował siutek 24.10.2017, 20:30:58
Go to the top of the page
+Quote Post
trueblue
post 24.10.2017, 20:36:12
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Gdybyś od razu pokazał cały kod, byłoby łatwiej.
Nie :first-child i :last-child, a :first-of-type i :last-of-type.


--------------------
Go to the top of the page
+Quote Post
siutek
post 24.10.2017, 20:51:34
Post #8





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Cytat(trueblue @ 24.10.2017, 21:36:12 ) *
Gdybyś od razu pokazał cały kod, byłoby łatwiej.
Nie :first-child i :last-child, a :first-of-type i :last-of-type.


Pięknie! teraz działa, wytłumacz mi tylko dlaczego musiałem zastosować .postRow:first-of-type a nie .postRow:first-child? Przecież nawet biorąc pod uwagę, że tam były buttony, to nie miały one klasy .postRow, a first-child i last-child miały się odnosić tylko do elementów z klasą .postRow. Chyba, że dla nich klasa nie ma znaczenia. odnoszą się do pierwszego i ostatniego dziecka, bez względu na to jaką klasę wskażę przed :
Go to the top of the page
+Quote Post
trueblue
post 24.10.2017, 21:08:06
Post #9





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.

Ten post edytował trueblue 24.10.2017, 21:23:28


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 22:38