{"id":2715,"date":"2023-09-16T15:08:45","date_gmt":"2023-09-16T06:08:45","guid":{"rendered":"https:\/\/uda2.com\/blog\/?p=2715"},"modified":"2024-01-18T09:12:48","modified_gmt":"2024-01-18T00:12:48","slug":"css_has","status":"publish","type":"post","link":"https:\/\/uda2.com\/blog\/css_has\/","title":{"rendered":"CSS\u306e:has()\u7591\u4f3c\u30af\u30e9\u30b9\u3063\u3066\u307e\u3060\u306a\u3093\uff1f"},"content":{"rendered":"\n<p>\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3\u304c\u5fc5\u8981\u3060\u3063\u305f\u306e\u3067\u3001checkbox\u3092\u4f7f\u3063\u3066\u3054\u306b\u3087\u3054\u306b\u3087\u3059\u308b\u306e\u306b\u304b\u306a\u308a\u8907\u96d1\u306b\u7d44\u307e\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u3067\u30a4\u30e4\u3060\u306a\u3068\u601d\u3063\u3066\u305d\u3046\u3044\u3048\u3070\u7d50\u69cb\u524d\u306b\u5642\u306b\u306a\u3063\u3066\u305f:has\u3063\u3066\u4f7f\u3048\u308b\u3093\u3058\u3083\u7121\u3044\u304b\uff1f\u3068\u3084\u3063\u3066\u307f\u305f\u3051\u3069\u5168\u7136\u52d5\u304b\u306a\u3044\u3001\u30b5\u30f3\u30d7\u30eb\u30b5\u30a4\u30c8\u3082\u52d5\u3044\u3066\u306a\u3044\u3001\u4ed5\u65b9\u306a\u304f\u8abf\u3079\u3066\u898b\u305f\u3089\uff08<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\/:has\" target=\"_blank\" rel=\"noreferrer noopener\">:has() &#8211; CSS: \u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 | MDN<\/a>\uff09Firefox\u304c\u672a\u3060\u5bfe\u5fdc\u3057\u3066\u306a\u3044\u3089\u3057\u3044\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u4e00\u5fdc\u305b\u3063\u304b\u304f\u66f8\u3044\u305f\u306e\u3067\u8f09\u305b\u3066\u304a\u304f\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.toggle { box-sizing: border-box;color: #fff;background-color: #ccc; width: 85px; height: 32px; border-radius: 5px; overflow: hidden; position: relative; display: inline-flex; align-items: center; flex-shrink: 0; user-select: none; vertical-align: middle; margin: 0;}\n.toggle:has(&gt;input:checked) { opacity: 1; background-color: #357ed1;}\n.toggle input {display:none;}\n.toggle::before,.toggle::after { display: block; position: absolute; z-index: 2; line-height: 100%; width: calc(100% - 32px - 3px); text-align: center;}\n.toggle::before {content: '\u30aa\u30f3';opacity: 0;left: 3px;}\n.toggle::after {content: '\u30aa\u30d5';opacity: 1;right: 3px;}\n.toggle:has(&gt;input:checked)::before { opacity: 1;}\n.toggle:has(&gt;input:checked)::after { opacity: 0;}\n.toggle .switch { background-color: #fff; display: block; height: 100%; position: absolute; right: 0; z-index: 3; box-sizing: border-box; transition: right 150ms linear, border-color 150ms linear; width: 32px; border-radius: 5px; border: 3px solid #ccc; right:calc(100% - 32px); }\n.toggle:has(&gt;input:checked) &gt; .switch { border-color: #357ed1; right: 0; }\n.onoff .switch {color: #999; border: 1px solid #999; display: inline-block; padding: 3px 5px; line-height: 1.2;}\n.onoff input {display:none;}\n.onoff .switch::after { content: '\u30aa\u30d5'; display: inline; }\n.onoff input:checked + .switch {color: #357ed1; border-color: #357ed1;}\n.onoff input:checked + .switch::after {content: '\u30aa\u30f3';}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label class=\"\"&gt;&lt;input checked=\"\" type=\"checkbox\" id=\"editmode\"&gt;&lt;span class=\"switch\"&gt;&lt;\/span&gt;&lt;\/label&gt;\n&lt;label class=\"toggle\"&gt;&lt;input checked=\"\" type=\"checkbox\" id=\"editmode\"&gt;&lt;span class=\"switch\"&gt;&lt;\/span&gt;&lt;\/label&gt;\n&lt;label class=\"onoff\"&gt;&lt;input checked=\"\" type=\"checkbox\" id=\"editmode\"&gt;&lt;span class=\"switch\"&gt;&lt;\/span&gt;&lt;\/label&gt;<\/code><\/pre>\n\n\n\n<p>\u3067\u304d\u3042\u304c\u308a\u306f\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<style type=\"text\/css\">\n.toggle { box-sizing: border-box;color: #fff;background-color: #ccc; width: 85px; height: 32px; border-radius: 5px; overflow: hidden; position: relative; display: inline-flex; align-items: center; flex-shrink: 0; user-select: none; vertical-align: middle; margin: 0 2em;}\n.toggle:has(>input:checked) { opacity: 1; background-color: #357ed1;}\n.toggle input {display:none;}\n.toggle::before,.toggle::after { display: block; position: absolute; z-index: 2; line-height: 100%; width: calc(100% - 32px - 3px); text-align: center;}\n.toggle::before {content: '\u30aa\u30f3';opacity: 0;left: 3px;}\n.toggle::after {content: '\u30aa\u30d5';opacity: 1;right: 3px;}\n.toggle:has(>input:checked)::before { opacity: 1;}\n.toggle:has(>input:checked)::after { opacity: 0;}\n.toggle .switch { background-color: #fff; display: block; height: 100%; position: absolute; right: 0; z-index: 3; box-sizing: border-box; transition: right 150ms linear, border-color 150ms linear; width: 32px; border-radius: 5px; border: 3px solid #ccc; right:calc(100% - 32px); }\n.toggle:has(>input:checked) > .switch { border-color: #357ed1; right: 0; }\n.onoff .switch {color: #999; border: 1px solid #999; display: inline-block; padding: 3px 5px; line-height: 1.2;}\n.onoff input {display:none;}\n.onoff .switch::after { content: '\u30aa\u30d5'; display: inline; }\n.onoff input:checked + .switch {color: #357ed1; border-color: #357ed1;}\n.onoff input:checked + .switch::after {content: '\u30aa\u30f3';}\n<\/style>\n<p>\n<label class=\"\"><input checked=\"\" type=\"checkbox\" id=\"editmode\"><span class=\"switch\"><\/span><\/label>\n<label class=\"toggle\"><input checked=\"\" type=\"checkbox\" id=\"editmode\"><span class=\"switch\"><\/span><\/label>\n<label class=\"onoff\"><input checked=\"\" type=\"checkbox\" id=\"editmode\"><span class=\"switch\"><\/span><\/label>\n<\/p>\n\n\n\n<p>\u5de6\u304b\u3089\u300c\u7121\u52a0\u5de5\u306a\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u300d\u300c:has()\u3092\u4f7f\u3063\u305f\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3\u300d\u300chas\u304c\u4f7f\u3048\u306a\u3044\u306e\u3067\u3068\u308a\u3042\u3048\u305a\u540c\u3058HTML\u3067\u30aa\u30f3\u30aa\u30d5\u5207\u308a\u66ff\u3048\u308c\u308b\u3088\u3046\u306b\u3060\u3051\u3057\u305f\u3082\u306e\u300d\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>\u8ffd\u4f38<\/strong><br>firefox\u30822023\u5e7412\u670819\u65e5\u4ee5\u964d\u300c:has()\u300d\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3082\u3088\u3046\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3\u304c\u5fc5\u8981\u3060\u3063\u305f\u306e\u3067\u3001checkbox\u3092\u4f7f\u3063\u3066\u3054\u306b\u3087\u3054\u306b\u3087\u3059\u308b\u306e\u306b\u304b\u306a\u308a\u8907\u96d1\u306b\u7d44\u307e\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u3067\u30a4\u30e4\u3060\u306a\u3068\u601d\u3063\u3066\u305d\u3046\u3044\u3048\u3070\u7d50\u69cb\u524d\u306b\u5642\u306b\u306a\u3063\u3066\u305f:has\u3063\u3066\u4f7f\u3048\u308b\u3093\u3058\u3083\u7121\u3044\u304b\uff1f\u3068\u3084\u3063\u3066\u307f\u305f\u3051\u3069\u5168\u7136\u52d5\u304b\u306a\u3044\u3001\u30b5\u30f3<\/p>\n","protected":false},"author":2,"featured_media":2721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[35],"class_list":["post-2715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creatorsdiary","tag-css"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/comments?post=2715"}],"version-history":[{"count":6,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2715\/revisions"}],"predecessor-version":[{"id":2750,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2715\/revisions\/2750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media\/2721"}],"wp:attachment":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media?parent=2715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/categories?post=2715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/tags?post=2715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}