CSS Predchádzajúce súrodenecké selektory a ako ich falšovať

Ak ste niekedy používali selekčné súpravy CSS, viete, že existujú iba dva. Kombinátor + súrodenec vyberie prvú zhodu, ktorá nastane ihneď po, a kombinátor ~ nasledujúcej súrodenca sa zhoduje so všetkými, ktoré prídu po.
Neexistuje však spôsob, ako vybrať, čo prišlo predtým. Buď rodičia, alebo predchádzajúci súrodenci jednoducho nie sú vecou.

Viem, že to chcete, viete, že to chcem, ale tvrdá pravda je, že neexistujú (a pravdepodobne nikdy nebudú). O tom, čo je na svete, existuje milión príspevkov. Existujú dokonca návrhy na ich implementáciu. Sme však zaseknutí v jednosmernom spracovaní pravidiel CSS, s najväčšou pravdepodobnosťou nás ochránia pred našou „nedostatočnou odbornosťou“, ktorá nás uviazne v opakovaných tokoch a dokonca aj nekonečných slučkách.

Našťastie, ako u väčšiny obmedzení CSS, môžeme to predstierať.

Prvá vec, ktorú treba zvážiť, je to, prečo chceme, aby predchádzajúci súrodenci začali.
Prichádzajú na myseľ dva prípady:

  1. Musíme vybrať všetkých súrodencov určitého prvku a nasledujúci kombinátor súrodencov vyberie iba tie, ktoré nasledujú.
  2. Musíme vybrať iba súrodencov, ktorí prišli predtým

1. Výber všetkých súrodencov

Niekedy je potrebné vybrať predchádzajúcich aj budúcich súrodencov. Aby sme to dosiahli, môžeme skutočne vybrať rodiča a použiť okolo neho nejaké triky.

Napríklad na výber všetkých rozpätí v nasledujúcej štruktúre, keď sa vznášame nad niektorým z nich, by sme mohli použiť iba výber dieťaťa na vznášaní rodiča. Zaistíme, aby sme deaktivovali udalosti ukazovateľa od rodičov a resetovali ich späť na deti. Čokoľvek, čo chceme, sa stane ohňom iba vtedy, keď vstúpime do dieťaťa a nie do samotného rodiča.

Ak potrebujete vybrať všetkých súrodencov okrem toho, ktorého sa vznášajú, môžete predchádzajúcu techniku ​​skombinovať s výberom: nie, aby ste ju vylúčili.

Typickým prípadom použitia sú ponuky:

Vyššie uvedený kód zníži nepriehľadnosť všetkých elementov

  • okrem toho, ktorý sa vznáša.

    Ďalej by ste mohli použiť filtre, ako sú selektory typu a n-tého, aby boli presnejšie pre súrodencov, ktorých chcete ovplyvniť.

    Pri niektorých úpravách by to malo fungovať takto:

    Poznámka: Ak spustíte udalosti ukazovateľa: žiadny prístup, nezabudnite, že sa môže pokaziť stohovaním (môže vám umožniť vybrať prvky, ktoré sú v poradí stohovania „pod“). Nefunguje to ani v IE10 a nižšie, okrem toho, že by ste mohli potrebovať udalosti ukazovateľa na niečo iné. Preto buďte pri používaní opatrní.

    2. Výber toho, čo prišlo predtým

    V tomto prípade použitia môžeme obrátiť poradie na HTML, potom ho zoradiť späť v CSS a použiť nasledujúci kombinátor súrodencov alebo + susedný výber súrodencov. Týmto spôsobom vyberieme ďalších súrodencov, ale vyzerá to, že vyberáme tých predchádzajúcich.

    Existuje niekoľko spôsobov, ako to urobiť. Najjednoduchšie a pravdepodobne najstaršie mení smer písania nášho kontajnera:

    Ak vaše prvky potrebujú zobraziť skutočný text, môžete ich kedykoľvek vrátiť späť:

    Ale to sa môže vymknúť z rúk mnohými spôsobmi. Našťastie moderný súbor nástrojov CSS je oveľa jednoduchší a bezpečnejší. Môžeme iba použiť Flexbox na kontajner a obrátiť objednávku pomocou flex-smer: rad-reverz:

    Najlepšia vec na prístupe Flexbox je, že sa neuberáme smerom písania. Nepotrebujeme resetovať deti a všetko je oveľa predvídateľnejšie.

    Pomocou „predchádzajúcich súrodencov“ vytvorte systém hodnotenia hviezdičiek CSS-Only

    Sémanticky možno hodnotiaci systém považovať iba za jednoduchý zoznam prepínačov s príslušnými štítkami. Toto sa hodí, pretože nám to umožní použiť: skontrolovaný pseudo-selektor na úpravu súrodencov.

    Začnime odtiaľto:

    Ako sme už diskutovali, prvky sú v opačnom poradí, aby umožnili výber „predchádzajúceho súrodenca“. Všimnite si, že na označenie prázdnych hviezd používame znak „bielej hviezdy“ unicode (U + 2606).

    Zobrazte ich vedľa seba v správnom (obrátenom) poradí:

    Teraz skryte samotné prepínače, nikto to nechce vidieť:

    A aplikujte nejaký štýl na hviezdne postavy:

    Jedinou skutočne dôležitou čiarou je pozícia: relatívna. Umožní nám to absolútne umiestniť na ňu vyplnenú hviezdu (U + 2605) pseudoprvku, ktorý bude spočiatku skrytý.

    Keď umiestnime kurzor myši na hviezdu, mal by byť pre ňu a pre všetkých predchádzajúcich súrodencov viditeľný vyplnený element hviezdy.

    Rovnaké pre vybraté hodnotenie porovnaním všetkých štítkov, ktoré sa nachádzajú pred začiarknutým prepínačom:

    Pamätajte, že používanie príznaku! Je presne opakom osvedčeného postupu. Robím to tu, pretože neexistuje žiadny iný spôsob, ako dosiahnuť pridanú funkčnosť, o ktorej sa hovorí v nasledujúcej časti, bez nej.

    V neposlednom rade si musíme „zapamätať“ aktuálne hodnotenie, len v prípade, že ho chce užívateľ zmeniť. Napríklad, ak vybrali päť hviezdičiek a z akéhokoľvek dôvodu ich chcú zmeniť na štyri, mali by sme zobraziť hviezdy 1 až 4 ako plné a piate ako polopriehľadné, keď sa vznášajú nad štvrtou.

    To sa dá dosiahnuť zmenou opacity predchádzajúcich súrodencov kontrolovaného vstupu, keď sa vznášajú nad kontajnerom:

    Preto sme v úvodnom vyhlásení o vznášaní potrebovali krytie: 1! V opačnom prípade by toto posledné pravidlo vyhralo súťaž o špecifickosť a použilo polopriehľadnú výplň na všetko.

    A máme tu krížový prehliadač, plne funkčný systém hodnotenia hviezd CSS, ktorý využíva selektory „predchádzajúcich súrodencov“.

    Ako vidíte, len preto, že „to je nemožné“, ešte neznamená, že by ste to nemali vyskúšať. Programovanie je o posúvaní limitov. Takže kedykoľvek narazíte na stenu, zatlačte trochu viac. Alebo si myslím, že nájsť cestu okolo toho môže byť lepšia analógia? ... aj tak, vieš, čo tým myslím. Pokračujte v hackovaní!

    Poznámka o prístupnosti

    Predchádzajúci úryvok je zjednodušenie, aby sa uľahčilo pochopenie. Nie je to niečo, čo by som odporučil použiť na výrobu kvôli mnohým obmedzeniam dostupnosti.

    Aby bol úryvok trochu prístupnejší, v prvom rade by bolo skryť prepínače pomocou takmer akejkoľvek techniky okrem zobrazenia: žiadna, aby boli zaostriteľné. Mali by sme pridať aj zaostrovací krúžok na útržok celých hviezd, keď je nejaký prvok vo vnútri zaostrený, pomocou pseudo-selektora: focus-inside.

    Rovnaké štítky „☆“ nemajú pre čítačky obrazovky žiadny zmysel, takže najlepším prístupom bude mať vo vnútri štítka s textom „n Stars“, ktorý bude skrytý pred viditeľnými používateľmi.

    Tiež spätný zdroj HTML + zobrazenie: riadok-spätný prístup robí hodnotenie klávesnice nepríjemné, pretože sa nevráti späť. Prístupnosť skrinky Flexbox a klávesnice je dosť chaotická téma, ale najbližšie k riešeniu tohto problému je pridanie aria-flowtotag ku každému prvku, ktorý problém aspoň vyrieši pre niektoré kombinácie čítačiek obrazovky + prehliadača.

    Pre prístupnejší úryvok (pomocou alternatívnej techniky úpravy budúcich súrodencov tak, aby vyzerali prázdne namiesto toho, aby sa snažili hodnotiť tie predchádzajúce), skontrolujte Patricka Coleho, ako sme diskutovali v odpovediach nižšie.