Clash Royale CLAN TAG

Is it possible to use CSS selectors without a list?

I have the following classes:

.at-icon.at-icon {}


And I need to style each element (Social network icon), that uses those classes, like this:

.at-icon.at-icon:nth-child(even) { fill: red !important }
.at-icon.at-icon:nth-child(odd) { fill: blue !important }


So one element would be red, and the other one would be blue. They all appear like this currently:

Screenshot

And my HTML using the class is:
Copy Link

The problem is: I don't have any <li> (List) in the DOM.
Unfortunately, this is all I can post here to reproduce my issue, as I'm using a third party tool, this one addthis.com

<li>

DOM

It's a free tool, you can use it for testing. I can't use it for testing as it would mean using my account resources and I might be going against their TOS.

1 Answer
1

I think what you are looking for is the descendant combinator.

What you could do is find the nearest parents of these <svg> elements that are siblings of one another, from what I can tell from your screenshot, these could be the <a> elements with the class at-share-btn applied to them.

<svg>

<a>

at-share-btn

Then, use those elements to identify the even and odd instances.

.at-share-btn:nth-child(even) {
}

.at-share-btn:nth-child(odd) {
}


After that, using the descendant combinator, target the <svg> elements within these <a> elements.

<svg>

<a>

.at-share-btn:nth-child(even) .at-icon {
fill: red !important;
}

.at-share-btn:nth-child(odd) .at-icon {
fill: blue !important;
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.