ampproject / ampproject/amphtml
CSS Nesting selectors inside <style amp-custom> are not validating in AMP Validator but work in Browser
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
When using nested selectors inside an AMP page’s ``, the CSS is not applied. AMP validates the page with errors, but the nested selectors are working in all browsers. This occurs even though the CSS Nesting specification is now supported in modern browsers (per MDN).
Specifically, rules like:
```css
.io-flag-img {
&.en_US {
background-image: url('../images/placeholder.svg#en_US');
}
}
```
are not parsed by the AMP runtime but produce the expected output.
### **Expected Behavior**
Nested rules inside `<style amp-custom>` should:
Parse correctly because the nesting selector is properly applied
Currently, the page does not validate but the CSS is applied.
### **Actual Behavior**
* AMP validation does not pass.
<img width="897" height="447" alt="Image" src="https://github.com/user-attachments/assets/37c2bc0d-f688-4747-98db-03b6ffe5ef98" />
* The browser applies the nested selector.
### **Additional Notes**
MDN reference for CSS nesting support:
[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector#browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector#browser_compatibility)
### Reproduction Steps
1. Create an AMP HTML page with the following minimal example:
```html
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
.io-flag-img {
width: 30px;
height: 30px;
&.en_US {
background:red;
}
}
```
2. Load the page in any modern browser (Chrome, Firefox, Safari) and see that the css is applied
3. Load it in the validator https://validator.ampproject.org/# and check that it reports the error
* AMP runtime: `https://cdn.ampproject.org/v0.js` (latest)
* Browsers tested: Chrome, Firefox, Safari
* All have native CSS nesting support in latest versions
### Relevant Logs
```shell
```
### Browser(s) Affected
Chrome
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.