Мною был выбран элемент из примера: картинка «Бухгалтерия Онлайн» с сайта СКБ-Контура. Выбрал его, чтобы можно было посоревноваться на длинный и короткий селекторы — наверняка не я один буду его рассматривать :)
html[xmlns="http://www.w3.org/1999/xhtml"] > head + body > div.main > div.head-block + div.menu-and-search + div.index > div.left-part- > div.b-slides.image-rounder-white + script[type="text/javascript"] + div.concepts.concepts__main + div.ad + div.left-part > div.left-col- + div.right-col- > div.news.fresh-news + div.buhonline-block > a[href="http://www.buhonline.ru"][target="_blank"] > img[src="/theme/ver-1603233632/images/buhonline-logo.gif"][alt="Бухгалтерия Онлайн"][title="Бухгалтерия Онлайн"]
img[alt$=н]
div + div > div + div > a > img.buhonline-block img.right-col- img.right-col- a img.right-col- a > img- …
Остальные приходящие на ум селекторы либо повторяют части самого длинного селектора, либо используют уже продемонстрированные подходы (такие как: исползование контекстных селекторов, соседних/дочерних селекторов и селекторов атрибутов).
Ради фана сделал страничку демонстрирующую "путь" длинного селектора.
html[xmlns="http://www.w3.org/1999/xhtml"] :nth-child(-2n+1) + :nth-child(-2n+2) > :nth-child(-2n+1) > :nth-child(-2n+1) + :nth-child(-2n+2) + :nth-child(-3n+3) > :nth-child(-2n+1) > div.b-slides.image-rounder-white + script[type="text/javascript"] + div.concepts.concepts__main + :nth-child(-4n+4) + :nth-child(2n+5) > :nth-child(-2n+1) + :nth-child(-2n+2) > div.news.fresh-news + div.buhonline-block > a[href="http://www.buhonline.ru"][target="_blank"] > img[src="/theme/ver-1603233632/images/buhonline-logo.gif"][alt="Бухгалтерия Онлайн"][title="Бухгалтерия Онлайн"]html :nth-child(-2n+2) > :nth-child(7n+1) > :nth-child(-3n+3) > :nth-child(5n+1) > :nth-child(-7n+5) > :nth-child(2n+2) > :nth-child(-2n+2) > :nth-child(10n+1) > :nth-child(-10n+1).main :nth-child(5n-2) .left-part- :nth-child(7n-2) .right-col- :nth-child(2n) a :nth-child(1).right-col- :last-child a :first-child- …