Предишни CSS селектори и как да ги фалшифицирате

Ако някога сте използвали селектори на CSS братя, знаете, че има само два. Комбинаторът + братовчед избира първия мач, който идва веднага след това, и ~ следващият комбиниращ брат съвпада с всички, които идват след това.
Но няма начин да изберете какво е идвало преди. Или селекционери на родители, или предишни селекционери на братя и сестри просто не са нещо.

Знам, че го искате, знаете, че го искам, но суровата истина е, че те не съществуват (и вероятно никога няма да го направят). Има милион публикации за уиски. Има дори предложения как да ги прилагаме. Но ние сме останали в еднопосочната обработка на CSS правилата, най-вероятно да ни предпази от нашата „липса на експертен опит“, затрупвайки се в повторни потоци и дори безкрайни контури.

За щастие, както при повечето CSS ограничения, можем да го фалшифицираме.

Първото нещо, което трябва да разгледаме, е защо искаме да започнат предишните братя и сестри.
Два случая идват на ум:

  1. Трябва да подберем всички братя и сестри на даден елемент, а ~ последващият комбиниращ братовчед само избира тези, които идват след това.
  2. Трябва да подберем само братя и сестри, дошли преди

1. Избор на всички братя и сестри

Понякога трябва да изберем както предишни, така и следващи братя и сестри. За целта можем всъщност да изберем родителя и да използваме някои трикове около него.

Например, за да изберете всички диапазони в следната структура, когато задържаме някой от тях, можем просто да използваме селектора за деца на курсора на родителя. Ние не забравяме да деактивираме показалеца-събития от родителя и да го върнем обратно на децата. Така че каквото и действие да искаме да се случи, ще се разпали само когато влезем в детето, а не в самия родител.

Ако трябва да изберете всички братя и сестри, с изключение на хоризонта, можете да комбинирате предишната техника със селектора: не, за да я изключите.

Типичен случай за използване за това са менюта:

Кодът по-горе ще намали непрозрачността на всички

  • елементи, но този, който се крие.

    Освен това, можете да използвате филтри, като тип и n-и селектори, за да бъдете прецизни по отношение на братята и сестрите, на които искате да повлияете.

    С някои стайлинг трябва да работи така:

    Моля, обърнете внимание: Ако ще стартирате показалеца-събития: никой подход, имайте предвид, че той може да се обърка със стекирането (може да ви позволи да изберете елементи, които са „по-долу“ в реда на подреждане). Той също няма да работи в IE10 и по-долу, с изключение на заключението, че може да се нуждаете от събитията с показалеца за нещо друго. Затова бъдете изключително внимателни, когато го използвате.

    2. Избор на това, което е идвало преди

    За този случай на използване можем да обърнем реда на HTML, след което да го сортираме обратно в CSS и да използваме ~ последващия комбиниращ синхронизатор или + съседен селектор на братята. По този начин ще изберем следващите братя и сестри, но ще изглежда, че избираме предишни.

    Има няколко начина за това. Най-простият и вероятно най-старият е промяна на посоката на писане на нашия контейнер:

    Ако вашите елементи трябва да показват действителния текст, винаги можете да го обърнете обратно:

    Но това може да излезе от употреба по много начини. За щастие съвременният CSS набор от инструменти го прави много по-опростен и безопасен. Можем просто да използваме Flexbox на контейнера и да обърнем реда с flex-посока: row-reverse:

    Най-хубавото в подхода Flexbox е, че не се забъркваме с посоката на писане. Не е нужно да нулираме децата и всичко е много по-предвидимо.

    Използване на „предишни братя и сестри“ за създаване на CSS система само за звезди

    Семантично система за класифициране може да се разглежда като просто обикновен списък от радио бутони със съответните им етикети. Това е полезно, тъй като ще ни позволи да използваме: проверения псевдоселектор за модифициране на братята и сестрите.

    Нека започнем оттам:

    Както обсъждахме по-рано, елементите са в обратен ред, за да се даде възможност за избор на „предишен брат”. Забележете, че използваме символа „бяла звезда“ на Unicode (U + 2606), за да представим празните звезди.

    Нека ги покажем един до друг в правилния (обратен) ред:

    Сега скрийте самите радио бутони, никой не иска да види това:

    И приложете някои стилизиране към звездните герои:

    Единствената наистина важна линия е позицията: относителна. Това ще ни позволи да позиционираме пълен звезден (U + 2605) псевдо елемент върху него, който първоначално ще бъде скрит.

    Когато се задържим над звезда, напълненият звезден псевдо елемент трябва да стане видим за него и всички предишни братя и сестри.

    Същото нещо за избраната оценка, като се съпоставят всички етикети, които са поставени преди отметения радио бутон:

    Не забравяйте, че използването на знака! Е точно обратното на добрата практика. Правя го тук, тъй като няма друг начин за постигане на добавената функционалност, обсъдена в следващия раздел, без него.

    Не на последно място, трябва да „помним” текущата оценка, само в случай, че потребителят иска да я промени. Например, ако бяха избрали пет звезди и по някаква причина искат да я променят на четири, трябва да показваме звезди 1 до 4 като запълнени, а петата като полупрозрачна, когато задържите курсора над четвъртата.

    Това може да се постигне чрез промяна на непрозрачността на предишните братя и сестри на проверения вход, когато се задържите върху контейнера:

    Ето защо ние се нуждаем от непрозрачността: 1! Важно в първоначалната висяща декларация. В противен случай това последно правило ще спечели конкурса за специфичност и ще приложи полупрозрачно запълване към всичко.

    И там го имаме, крос-браузър, напълно функционална система за класифициране на звезди само за CSS, използвайки селектори за „предишни братя и сестри“.

    Както можете да видите, само защото „това е невъзможно“ не означава, че не трябва да се опитвате. Програмирането е свързано с натискане на границите. Затова всеки път, когато ударите стената, просто натиснете малко по-силно. Или предполагам, че намирането на път може да е по-добра аналогия? ... така или иначе, знаете какво имам предвид. Продължавайте да хаквате!

    Бележка за достъпност

    Предишният фрагмент представлява опростяване, за да бъде по-лесно да се разбере. Това не е нещо, което бих препоръчал да използвам при производството поради много ограничения на достъпността.

    За да направите фрагмента малко по-достъпен, първо ще бъде да скриете радио бутоните с почти всякаква техника, различна от дисплея: нито една, която да ги прави фокусирани. Трябва да добавим и пръстен за фокусиране върху фрагмента на цели звезди, когато всеки елемент вътре е фокусиран, чрез псевдоселектора: фокус-вътре.

    Идентичните етикети „☆“ нямат смисъл за екраните, така че най-добрият подход е да има вътре в етикета с текст „n Stars“, който да бъде скрит от зрящите потребители.

    Също обратният HTML източник + дисплей: обратният ред на реда прави класификацията на клавиатурата неудобна, тъй като не се връща обратно. Достъпността на Flexbox и клавиатурата е доста объркана тема, но най-близкото до решение за това е добавянето на aria-flowtotag към всеки елемент, което поне решава проблема за някои екранни четци + браузърни комбинации.

    За по-достъпен фрагмент (използвайки алтернативна техника за промяна на следващите братя и сестри, за да изглеждате празни, вместо да се опитвате да оценявате предишни), проверете Патрик Коул, както обсъдихме в отговорите по-долу.