I am facing a requirement to customize the colors of ribbon styles instead of using the default ones.
After researching pattern matching in CSS, I attempted the following code, but it did not work:
This is my original CSS:
.ms-cui-cg-**tl** .ms-cui-ct-first>.ms-cui-tt-a,
.ms-cui-cg-**tl** .ms-cui-ct-first>.ms-cui-tt-a:hover {
border-left-color: #000;
}
.ms-cui-cg-**gr** .ms-cui-ct-first>.ms-cui-tt-a,
.ms-cui-cg-**gr** .ms-cui-ct-first>.ms-cui-tt-a:hover {
border-left-color: #000;
}
To match this pattern, I have created the following CSS:
div[class^="ms-cui-cg- .ms-cui-ct-first>.ms-cui-tt-a"],
div[class^="ms-cui-cg- .ms-cui-ct-first>.ms-cui-tt-a:hover"] {
border-left-color: #000;
}
I am attempting to match the pattern with **tl** and **gr**. Could someone identify any mistakes I may be making here?