{"id":5123,"date":"2025-02-07T09:50:06","date_gmt":"2025-02-07T14:50:06","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5123"},"modified":"2025-02-07T09:50:07","modified_gmt":"2025-02-07T14:50:07","slug":"three-approaches-to-the-ampersand-selector-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/three-approaches-to-the-ampersand-selector-in-css\/","title":{"rendered":"Three Approaches to the “&” (ampersand) Selector in CSS"},"content":{"rendered":"\n

In CSS nesting, the &<\/code> (ampersand symbol) selector adds style rules based on the relation between nested selectors. For example, a pseudo-class (:hover<\/code>) nested inside a type selector (div<\/code>) becomes a compound selector (div:hover<\/code>) when the nested pseudo-class is prefixed with &<\/code>.<\/p>\n\n\n

div<\/span> {\n  &:hover {\n    background<\/span>: green;\n  }\n}\n\n\/*\nThe above code is equivalent to:\ndiv:hover {\n  background: green;\n}\n*\/<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
A use-case for the &<\/code> selector is to combine it with the :has()<\/code> pseudo-class to select and style elements based on the child elements they contain. In the following example, a label<\/code> is styled for when the checkbox within it is checked.<\/p>\n\n\n
<label<\/span>><\/span>\n  <input<\/span> type<\/span>=\"checkbox\"<\/span>><\/span>\n  Allow access to all files\n<\/label<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
label<\/span> {\n  \/* etc. *\/<\/span>\n  &:has(:checked) {\n    border<\/span>: 1px<\/span> solid lime;\n  }\n}\n\n\/*\n  The above code is equivalent to:\n\n  label:has(:checked) {\n    border: 1px solid lime;\n  }\n*\/<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n