{"id":345379,"date":"2023-02-13T15:02:15","date_gmt":"2023-02-13T15:02:15","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=345379"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=345379","title":{"rendered":"<span>\u041f\u0440\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0432\u044b\u043a\u0438 CSS \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 :has()<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/6l\/si\/tk\/6lsitknanqlqucpeyu6efsothve.png\" data-src=\"https:\/\/habrastorage.org\/webt\/6l\/si\/tk\/6lsitknanqlqucpeyu6efsothve.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 <a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/level-up-css-skills-has-selector\">\u044d\u0442\u043e\u0439 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:has\">:has()<\/a>.<\/p>\n<p>  <\/p>\n<p><code>:has()<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c &#171;\u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u043f\u0435\u0440\u0435\u0434&#187; \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043f\u0440\u0435\u0434\u043a\u0430). \u042d\u0442\u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432). \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438\u043b\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u043b\u044e\u0431\u0443\u044e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u043b\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c <code>:has()<\/code> <a href=\"https:\/\/caniuse.com\/css-has\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043f\u043e\u043a\u0430 \u0440\u0430\u043d\u043e.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"vzaimodeystvie-has-s-kombinatorami-i-psevdoklassami\">\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 <code>:has()<\/code> \u0441 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 (combinator) \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u0442\u0438\u043f \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u043e\u0431\u0435\u043b \u2014 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u043b\u044e\u0431\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 (descendent combinator) (\u043a\u0430\u043a \u043f\u0440\u044f\u043c\u044b\u0445, \u0442\u0430\u043a \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445);<\/li>\n<li><code>><\/code> \u2014 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 (direct child combinator);<\/li>\n<li><code>+<\/code> \u2014 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u0441\u043c\u0435\u0436\u043d\u043e\u0433\u043e \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0430 (adjacent sibling combinator) (\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430);<\/li>\n<li><code>~<\/code> \u2014 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u043e\u0431\u0449\u0438\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 (general sibling combinator) (\u0432\u0441\u0435\u0445 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u044d\u0442\u0430\u043f\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0430 \u043a \u043e\u0434\u043d\u043e\u0439 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u044f\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>:hover<\/code>. \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>:has()<\/code> \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u0422\u043e\u0447\u043d\u0435\u0435, \u043e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432\u0440\u043e\u0434\u0435 <code>img<\/code>, \u0442\u0430\u043a \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 (\u0441 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u0430\u043c\u0438) \u0432\u0440\u043e\u0434\u0435 <code>img + p<\/code>.<\/p>\n<p>  <\/p>\n<p><code>:has()<\/code> \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:is\">:is()<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:where\">:where()<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:not\">:not()<\/a>.<\/p>\n<p>  <\/p>\n<p><code>:is()<\/code> \u0438 <code>:where()<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>:is()<\/code> \u0432\u0435\u0441 \u0432\u0441\u0435\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441 \u043d\u0430\u0438\u0432\u044b\u0441\u0448\u0435\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>:where()<\/code> \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0443\u043b\u0435\u0432\u043e\u0439, \u0447\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0437\u0434\u043d\u0438\u043c\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0432 \u043a\u0430\u0441\u043a\u0430\u0434\u0435.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, <code>:is()<\/code> \u0438 <code>:where()<\/code> \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u043c\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 &#171;\u043f\u0440\u043e\u0449\u0430\u0435\u0442&#187; \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0442.\u0435. \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0433\u0440\u0443\u043f\u043f\u0443.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>:is()<\/code> \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432: <code>article :is(h1, h2, h3)<\/code> \u2014 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>h1<\/code>, <code>h2<\/code> \u0438 <code>h3<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>article<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>:not()<\/code> \u0440\u0430\u043d\u044c\u0448\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f Selectors Level 4 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043b\u0430 \u0435\u043c\u0443 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 <code>:not()<\/code> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e <code>:is()<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u0432\u0430\u0436\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c: \u0441\u0438\u043c\u0432\u043e\u043b <code>*<\/code> (\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u2014 universal selector) \u0432 <code>:is()<\/code>, <code>:where()<\/code> \u0438 <code>:not()<\/code> \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0446\u0435\u043b\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u043a\u043e\u0432 \u0446\u0435\u043b\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <code>img:not(h1 + *)<\/code> \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <em>\u043d\u0435<\/em> \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430 <code>h1<\/code>, \u0430 \u0432 <code>p:is(h2 + *)<\/code> \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u044b, <em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em> \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430 <code>h2<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c. \u043f\u0435\u0440.:<\/em> \u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0435\u043d\u0438\u044f \u044f \u043f\u0440\u043e\u043f\u0443\u0449\u0443 \u0440\u0430\u0437\u0434\u0435\u043b <a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/level-up-css-skills-has-selector#polyfill-for-only-of-selector\"><code>\"\u041f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f :only-of-selector<\/code>&#171;<\/a>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u044b, \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0435 <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/qByprrp\">\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 <code>.highlight:not(:has(~ .highlight)):not(.highlight ~ *)<\/code> \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0435\u0440\u0435\u0437 <code>.highlight<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"selektor-predyduschih-siblingov\">\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432<\/h2>\n<p>  <\/p>\n<p><code>:has()<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430 \u043d\u0438\u043c\u0438. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u043e\u043d \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0434 \u0438 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u041e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445. \u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u0440\u043e\u043c\u0435 &#171;\u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e&#187;, \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c. \u042d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>:has()<\/code>. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&#187;:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">li:has(+ li:hover)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c *\/ \/* \u0432\u0442\u043e\u0440\u043e\u0439 `li` \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c *\/ li:has(+ li:hover), \/* \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e *\/ \/* \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e `li` \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c `*` *\/ li:hover + li {   \/* \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c *\/ }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0440\u0435\u0442\u0438\u0439 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e <code>:has()<\/code> \u0438 <code>:not()<\/code>. \u042d\u0442\u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430\u0432\u0435\u0434\u0435\u043d \u043d\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 <code>ul<\/code> (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430), \u043a\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u0440\u043e\u043c\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u0434 \u0438 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">ul:has(> :hover) li:not(:hover, :has(+ :hover), li:hover + *) {   \/* \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c *\/ }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63df64ab3afabae0665f8726\" data-style=\"\" id=\"63df64ab3afabae0665f8726\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"vybor-diapazona-elementov\">\u0412\u044b\u0431\u043e\u0440 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u0436\u0434\u0443 <code>h2<\/code> \u0438 <code>hr<\/code> \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;article>   &lt;h2>Lorem, ipsum.&lt;\/h2>   &lt;!-- \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 h2 -->   &lt;p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.&lt;\/p>   &lt;p>Nobis iusto voluptates reiciendis molestias, illo inventore ipsum?&lt;\/p>   &lt;!-- \u043a\u043e\u043d\u0435\u0446 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 h2 -->   &lt;h2>Lorem, ipsum dolor.&lt;\/h2>   &lt;p>Lorem ipsum dolor sit amet.&lt;\/p>   &lt;hr>   &lt;!-- \u043d\u0430\u0447\u0430\u043b\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 hr -->   &lt;p>Lorem ipsum dolor sit.&lt;\/p>   &lt;p>Dolor animi nisi ut?&lt;\/p>   &lt;p>Sunt consectetur esse quia.&lt;\/p>   &lt;!-- \u043a\u043e\u043d\u0435\u0446 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 hr -->   &lt;hr>   &lt;p>Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;\/p> &lt;\/article><\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>:has()<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430;<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430;<\/li>\n<li>\u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u043e\u0431\u0449\u0438\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 &#171;\u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u043f\u0435\u0440\u0435\u0434&#187; \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 \u0437\u0430 \u0440\u0430\u0437.<\/p>\n<p>  <\/p>\n<p><strong>\u0412\u044b\u0431\u043e\u0440 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0430, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430 <code>h2<\/code> \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u0437\u0430 \u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 <code>h2<\/code>&#171;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u043c, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430 \u043f\u0435\u0440\u0432\u044b\u043c <code>h2<\/code> \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">article h2 + :has(~ h2)<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u044b\u0431\u043e\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0437\u0430 <code>h2<\/code> \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u0437\u0430 \u043d\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 <code>h2<\/code>&#171;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u043c \u043f\u0435\u0440\u0435\u0434 \u0432\u0442\u043e\u0440\u044b\u043c <code>h2<\/code> \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">article h2 ~ :has(+ h2)<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430 <code>hr<\/code>, \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u0437\u0430 \u043d\u0438\u043c\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 <code>hr<\/code>&#171;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0442\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 <code>hr<\/code> \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">article hr ~ :has(~ hr)<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/em> \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63e88a31396453e03449b7f7\" data-style=\"\" id=\"63e88a31396453e03449b7f7\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"vybor-odnogo-polnogo-diapazona\">\u0412\u044b\u0431\u043e\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-range<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul>   &lt;li>Lorem&lt;\/li>   &lt;li data-range>Veritatis&lt;\/li>   &lt;li>Eos&lt;\/li>   &lt;li>Debitis&lt;\/li>   &lt;li>Autem&lt;\/li>   &lt;li data-range>Atque&lt;\/li>   &lt;li>Eius&lt;\/li>   &lt;li>Lorem&lt;\/li>   &lt;li>Nostrum&lt;\/li> &lt;\/ul><\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-range<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0441\u0435\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">[data-range] ~ :has(~ [data-range])<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>data-range<\/code>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u0438\u0431\u043b\u0438\u043d\u0433 \u0441 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c&#187;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0435\u0440\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">[data-range]:has(~ [data-range])<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>data-range<\/code>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c <em>\u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e<\/em> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c&#187;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">[data-range] ~ [data-range]<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63e88a32a0a2e96fdf31b795\" data-style=\"\" id=\"63e88a32a0a2e96fdf31b795\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"vybor-neskolkih-diapazonov\">\u0412\u044b\u0431\u043e\u0440 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u041a\u043b\u044e\u0447\u043e\u043c \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u043d\u043e\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>data-range<\/code>, \u043d\u043e \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 <code>start<\/code> \u0438 <code>end<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul>   &lt;li>Lorem&lt;\/li>   &lt;li data-range=\"start\">Veritatis&lt;\/li>   &lt;li>Eos&lt;\/li>   &lt;li>Debitis&lt;\/li>   &lt;li>Autem&lt;\/li>   &lt;li data-range=\"end\">Atque&lt;\/li>   &lt;li>Eius&lt;\/li>   &lt;li>Lorem&lt;\/li>   &lt;li>Nostrum&lt;\/li> &lt;\/ul><\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 *\/ [data-range]  \/* \u043d\u0430\u0447\u0430\u043b\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 *\/ [data-range=\"start\"]  \/* \u043a\u043e\u043d\u0435\u0446 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 *\/ [data-range=\"end\"]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u0442\u0430-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>start<\/code> \u0438 <code>end<\/code>. \u0417\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u0438 \u043a\u043e\u043d\u0446\u0443 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>:not([data-range])<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 *\/ [data-range=\"start\"] + :has(~ [data-range=\"end\"]):not([data-range])  \/* \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 *\/ [data-range=\"start\"] ~ :has(+ [data-range=\"end\"]):not([data-range])<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043d\u0430\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430? \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">[data-range=\"start\"] ~ :has(~ [data-range=\"end\"]):not([data-range])<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/oh\/p3\/hs\/ohp3hsnwo7s5onekg4pxbes6gce.png\" data-src=\"https:\/\/habrastorage.org\/webt\/oh\/p3\/hs\/ohp3hsnwo7s5onekg4pxbes6gce.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f: \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 <code>AND<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>:not()<\/code> \u0434\u043b\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;<em>\u043d\u0435<\/em> \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430 <code>[data-range=\"end\"]<\/code>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 <code>[data-range=\"start\"]<\/code>&#171;:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 *\/ :not([data-range=\"end\"] ~ :has(~ [data-range=\"start\"]))<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a (\u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0439, \u0434\u043e <code>:has()<\/code> \u0442\u0430\u043a\u043e\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c):<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 *\/ [data-range=\"start\"] ~ :has(~ [data-range=\"end\"]):not([data-range]):not([data-range=\"end\"] ~ :has(~ [data-range=\"start\"]))<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63e88a33d791666fa213d3fc\" data-style=\"\" id=\"63e88a33d791666fa213d3fc\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"lineynyy-vybor-diapazona-na-osnove-sostoyaniya\">\u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &#171;\u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0433\u043e&#187; \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0430.<\/p>\n<p>  <\/p>\n<p>&#171;\u0417\u0432\u0435\u0437\u0434\u0430&#187; \u0431\u0443\u0434\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>input<\/code> \u0442\u0438\u043f\u0430 <code>radio<\/code> (\u0440\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043a\u043e\u0439), \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c <code>:checked<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"star-rating\">   &lt;fieldset>     &lt;legend>Rate this demo&lt;\/legend>     &lt;div class=\"stars\">       &lt;label class=\"star\">         &lt;input type=\"radio\" name=\"rating\" value=\"1\">         &lt;span>1&lt;\/span>       &lt;\/label>       &lt;!-- \u0435\u0449\u0435 4 \u0437\u0432\u0435\u0437\u0434\u044b -->     &lt;\/div>   &lt;\/fieldset> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0437\u0432\u0435\u0437\u0434\u0443, \u0437\u0432\u0435\u0437\u0434\u044b \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u0443\u044e (\u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d) \u0437\u0430\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0438\u043d\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c;<\/li>\n<li>\u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0437\u0432\u0435\u0437\u0434\u044b, \u0437\u0432\u0435\u0437\u0434\u0430 \u0438 \u0435\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445, \u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f;<\/li>\n<li>\u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0437\u0432\u0435\u0437\u0434\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439, \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b \u0434\u043e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u043e\u043c;<\/li>\n<li>\u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u043e\u0434\u0438\u0442 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0437\u0432\u0435\u0437\u0434\u0443 \u0434\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439, \u0437\u0430\u043b\u0438\u0432\u043a\u0430 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u043e\u0442 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b \u0434\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0432\u0435\u0442\u043b\u0435\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c, \u0433\u0434\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043b\u0438\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u043c \u0437\u0432\u0435\u0437\u0434\u0443 \u0438\u043b\u0438 \u0437\u0432\u0435\u0437\u0434\u044b \u0434\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b (<code>:checked<\/code>). \u041f\u0440\u0430\u0432\u0438\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0445 \u043d\u0430 \u0444\u0438\u0433\u0443\u0440\u0443 \u0437\u0432\u0435\u0437\u0434\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>::before<\/code> \u0438 <code>::after<\/code> \u043d\u0430 <code>label.star<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0437\u0432\u0435\u0437\u0434 \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u0434\u043e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0438\u043b\u0438 \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u0434\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u0430 *\/ .star:hover, \/* \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b *\/ .star:has(~ .star:hover), \/* \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u0430 *\/ .star:has(:checked), \/* \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b *\/ .star:has(~ .star :checked) {   --star-rating-bg: dodgerblue; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0437\u0432\u0435\u0437\u0434 \u043e\u0442 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0434\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0438 \u0441\u0430\u043c\u043e\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b \u0431\u044b\u043b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0432\u0435\u0442\u043b\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u0430\u043c\u0438 *\/ .star:hover ~ .star:has(~ .star :checked), \/* \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 *\/ .star:hover ~ .star:has(:checked) {   --star-rating-bg: lightblue; }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63e88a349f1c6be050b5c419\" data-style=\"\" id=\"63e88a349f1c6be050b5c419\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"vybor-neskolkih-diapazonov-na-osnove-sostoyaniya\">\u0412\u044b\u0431\u043e\u0440 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p><code>:has()<\/code> \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432 (<code>&lt;input type=\"checkbox\"><\/code>), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>:checked<\/code> \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446 \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0438\u043c\u0435\u043b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0444\u043e\u043d. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0433\u0440\u0443\u043f\u043f\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b: \u043f\u0435\u0440\u0432\u044b\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0438\u0436\u043d\u044e\u044e, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043a\u043e\u0432\u044b\u0435. \u0413\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u043c\u0438. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0433\u0440\u0443\u043f\u043f\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0442\u0435\u043d\u044c.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e, \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432 \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435. \u041e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0432\u0441\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u044c (<code>&lt;label><\/code>), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 <code>label:has(:checked)<\/code> \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c <em>\u043d\u0435\u0442<\/em> \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&#187;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0432\u0435\u0440\u0445\u043d\u0438\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c \u0433\u0440\u0443\u043f\u043f\u044b \u0438 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">label:has(:checked):not(label:has(:checked) + label)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 <em>\u043d\u0435<\/em> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c&#187;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043d\u0438\u0436\u043d\u0438\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c \u0438 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">label:has(:checked):not(label:has(+ label :checked))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e <code>label:has(:checked)<\/code>, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0433\u043b\u0430\u0441\u0438\u0442 &#171;\u0432\u044b\u0431\u0435\u0440\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0437\u0430 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u0430\u043c\u0438 \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u043c\u0438&#187;, \u0447\u0442\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u043c\u0438, \u043a\u0440\u043e\u043c\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e. \u0414\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">label:has(:checked):has(~ label :checked), label:has(:checked):not(label:has(+ label :checked))<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/63e88a347a8d27e0260e46d9\" data-style=\"\" id=\"63e88a347a8d27e0260e46d9\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 <a href=\"https:\/\/codepen.io\/collection\/wapNEJ\/327b65e9704d65901e397025ea2d51ba\">\u044d\u0442\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438<\/a> \u043d\u0430 CodePen.<\/p>\n<p>  <\/p>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>Bramus Van Damme:<br \/> \n<ul>\n<li><a href=\"https:\/\/www.bram.us\/2022\/12\/13\/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has\/\"><code>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f \"\u043e\u0441\u0442\u0440\u043e\u0432\u043a\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\" \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f :has()<\/code><\/a>;<\/li>\n<li><a href=\"https:\/\/www.bram.us\/2022\/12\/14\/a-nth-childanb-of-s-polyfill-thanks-to-css-has\/\"><code>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u0430 :nth-child(An+B [of S]?) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e<\/code>:has()<code>\u0438<\/code>:not()`<\/a>;<\/li>\n<li><a href=\"https:\/\/www.bram.us\/2022\/11\/17\/style-a-parent-element-based-on-its-number-of-children-using-css-has\/\"><code>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e :has()<\/code><\/a>;<\/li>\n<\/ul>\n<\/li>\n<li>Jhey Tompkins \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438 \u0437\u0430\u0431\u0430\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>:has()<\/code> \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/developer.chrome.com\/blog\/has-m105\/\"><code>:has()<\/code>: \u0441\u0435\u043c\u0435\u0439\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440<\/a>;<\/li>\n<li>Jen Simmons \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>:has()<\/code> \u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440\u043e\u0432 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/webkit.org\/blog\/13096\/css-has-pseudo-class\/\"><code>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 :has()<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e<\/a>;<\/li>\n<li>Adrian Bece \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>:has()<\/code> \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/www.smashingmagazine.com\/2021\/06\/has-native-css-parent-selector\/\"><code>\u0412\u0441\u0442\u0440\u0435\u0447\u0430\u0439\u0442\u0435 :has<\/code>, \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 CSS (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e)<\/a>;<\/li>\n<li>Estelle Weyl \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f <code>:has()<\/code> \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/12daysofweb.dev\/2022\/css-has-selector\/\"><code>CSS :has()<\/code><\/a>;<\/li>\n<li>Manuel Matuzovi\u0107 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u0430\u0436\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 (<code>:has(:not())<\/code> \u0438 <code>:not(:has)<\/code>)[<a href=\"https:\/\/www.matuzo.at\/blog\/2022\/100daysof-day50\/\">https:\/\/www.matuzo.at\/blog\/2022\/100daysof-day50\/<\/a>].<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u044b, \u043a\u0430\u043a \u0438 \u044f \u0443\u0437\u043d\u0430\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0438 \u043d\u0435 \u0437\u0440\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 happy coding!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><a href=\"https:\/\/timeweb.cloud\/?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=vds-promo-6-rub\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/p-\/u9\/l2\/p-u9l27ynelxi92bcmdxhu76ma8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/p-\/u9\/l2\/p-u9l27ynelxi92bcmdxhu76ma8.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/716356\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/716356\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/6l\/si\/tk\/6lsitknanqlqucpeyu6efsothve.png\" data-src=\"https:\/\/habrastorage.org\/webt\/6l\/si\/tk\/6lsitknanqlqucpeyu6efsothve.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 <a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/level-up-css-skills-has-selector\">\u044d\u0442\u043e\u0439 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:has\">:has()<\/a>.<\/p>\n<p>  <\/p>\n<p><code>:has()<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c &#171;\u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u043f\u0435\u0440\u0435\u0434&#187; \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043f\u0440\u0435\u0434\u043a\u0430). \u042d\u0442\u043e\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432). \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438\u043b\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u043b\u044e\u0431\u0443\u044e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u043b\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c <code>:has()<\/code> <a href=\"https:\/\/caniuse.com\/css-has\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043f\u043e\u043a\u0430 \u0440\u0430\u043d\u043e.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-345379","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/345379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=345379"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/345379\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=345379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=345379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=345379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}