Pseudo selector-ok értelmezése

Pseudo selector-ok értelmezése
2020-11-13T22:27:38+01:00
2020-11-27T19:38:52+01:00
2022-10-15T21:16:35+02:00
szilkov
Sziasztok!

Pseudo selector értelmezésében szeretnék segítséget kérni. 
Szerintem a két selector-nál ugyanazt a logikát kellene használni, de mégsem működik. 
Hol megyek vakvágányra?

A kérdés szempontjából lényegtelen elemeket kipöttyöztem.

<body> <div class="header"> ... </div> <nav class="sticky"> ...> </nav> <div class="sticky" id="gombok"> ... </div> <div class="container" id=rolunk> ... </div> <div class="stripe"> ... </div> <div class="container" id="arlista"> <h2>Árlista</h2> <div class="hasab" id="hasab1"> <img class="arlistakep" id="1" src="img/pexels-engin-akyurt-3065209.jpg" alt=""> </div> <div class="hasab" id="hasab2"> <img class="arlistakep" id="2" src="img/pexels-photo-939836.jpeg" alt="" onclick="ManikurArlista()"> </div> <div class="hasab" id="hasab3"> <img class="arlistakep" id="3" src="img/pexels-pixabay-36793.jpg" alt="" onclick="PedikurArlista()"> </div> </div> <div class="stripe"></div> <div class="container" id="hirek"> <h2>Zinzy Hírek</h2> <div class="hirekhasab"> ... </div> <div class="hirekhasab"> <img src="img/119025140_3349367181788584_4845249486211127137_n.jpg" alt=""> <img src="img/osziszinek2.jpg" alt=""> <h4>2020.09.08.</h4> <h4>Új őszi színek</h4> </div> <div class="hirekhasab"> <h4>2020.09.01.</h4> <img src="img/pexels-evg-culture-3869390.jpg" alt=""> <p>"Tájékoztatjuk kedves Vendégeinket, hogy a járványügyi helyzetnek megfelelően, szalonunk csak maszkot viselve látogatható. Ezen felül minden higiéniai és fertőtlenítési ajánlást betartva próbáljuk biztosítani, hogy a szépülés alatt Önök és Mi is biztonságban tudhassuk magunkat."</p> </div> </div>
A két aláhúzott div-ben szeretném kijelölni a benne lévő minden img elemet. 

A második esetben tökéletesen a működik:

.hirekhasab:nth-of-type(2) img{ width: 40%; }
Az elsőnél ugyanezt a logikát használva nem működik:
.container:nth-of-type(2) img { }

Miért nem jó a logikám?
Köszönöm az ötleteket!
Mutasd a teljes hozzászólást!
A utóbbi eset azért működik, mert az aláhúzott div "hirekasab" osztályú, és pontosan a második div "típusú" gyereke a szülőjének.

A mintádban az első aláhúzott div (.container) előtt van még 4 db. div, tehát ő az ötödik div típusú gyereke a parent-nek (a parent itt már ugye a <body>).

Ha nem néztem be a dolgot, akkor nth-of-type megoldással (bár nem értem, hogy miért bonyolítod ezzel) így lehetne elcsípni azokat a képeket:

.container:nth-of-type(5) img { ... }
Mutasd a teljes hozzászólást!

  • Hali!

    Miért nem jó a logikám?

    Azért, mert – tévesen – úgy gondolod, hogy az :nth-of-type() pszeudo-osztállyal csak az előtte hozzákapcsolt szelektorú elemek közül válogatsz és csak azok sorrendje/elhelyezkedése dönt. Ez csak félig van így:
    1. Tényleg csak a pszeudo-osztály előtti szelektorral megcélzott (esetedben pl. a .container osztályú) elemeket veszi. De ez független az :nth-of-type() pszeudo-osztálytól, ez egy sztenderd szűkítés.
    2. A sorrend/elhelyezkedés szempontjából viszont már az elem típusa (tag-neve) a döntő, azaz, hogy ugyanabból a tag-ból (esetedben div) hányadik az elem egy szinten (ugyanazon konténer-elemen belül).

    Szóval, a .container:nth-of-type(2) szelektor azt jelenti, hogy „célozd meg a második elemet, ha annak van .container osztálya” és nem azt, hogy „célozd meg a második .container osztályú elemet”. Mivel az általad kiválasztani kívánt .container osztályú div ugyan tényleg a második .container osztályú div, viszont „csak” div-ként (ami az :nth-of-type szempontjából a lényeges) ötödik, ezért nem éred el a kívánt eredményt.
    Olyan pszeudo-osztály/-szelektor, amit szeretnél (azaz, pl. :nth-of-class, :nth-of-selector, :nth-of-something) – egyelőre még – nincs.

    Mutasd a teljes hozzászólást!
  • Bocsánat, azt hiszem pookie válaszát kellett volna elfogadnom, mert ő írt előbb, csak nem ilyen részletesen, de nem tudom visszacsinálni.
    Köszönöm a részletes magyarázatot!
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd