Amphtml: cannot change .-amp-accordion-header background color

[sparks1975]

Background color of accordion header cannot be changed. When background-color style is applied to the first child of the amp-accordion, it is overwritten by the .-amp-accordion-header style injected by the js.

[jpettitt]

Put an id on your amp-accordion then you can do #accordionId .headerClass { background: red; } and it will work becasue the Id has a higher specificity in the CSS.

See the footer of https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html for a live example.

This article explain CSS specificity really well https://css-tricks.com/specifics-on-css-specificity/

[erwinmombay]

feel like this is a bug on our end, but its a hard problem because of the injected styles which are delayed

[jpettitt]

@erwinmombay It's not really a bug, you're adding a class and you're injecting your CSS above the user CSS so it's trivial to override the default. Pretty much the only way around this would be to not provide default styling, removing it at this stage would be a breaking change.

There is a good question here going forward about very careful review of default styling, particularly in -amp styles that can't be directly overridden, in new features before they are deployed.

[sparks1975]

@jpettitt Thank you for the solution. It worked for what I was needing to do. It does seem odd to have a major style such as background color associated with a selector that cannot be directly overwritten.