Need help with CSS Selector and Attributes

Development Web Development
1

I’m working on changing Firefox around a bit. For that, i’m attaching some ::after elements to existing things. I’ve run into a bit of a road-block though.

I have a structure similar to this:

<div id=star-button-box>
    <div id=star-button>
    </div>
</div

star-button has an image attached, that i’m deleting. star-button-box gets an ::after element with a content property. The Icon’s i’m trying to use aren’t available as svg, but as a font only.
So far, i’ve got all of this working. Now, star-button has a Attribute [starred] that’s present or not. I now want to change the foreground color based on that attribute. How could i do this? My current attempt, that isn’t working:

#star-button-box::after {
    position: absolute;
    font-family: "Segoe MDL2 Assets";
    font-size: 12pt;
    top: 3px;
    content: "";
    right: 4px;
}

#star-button-box::after > #star-button[starred]{
    color: yellow;
}

Is there any way to make this work?

2 
#star-button-box::after > #star-button[starred]

You are selecting a direct descendant (child) of a pseudo-element, but pseudo-elements by definition don’t have descendants, they only are descendants/childs of their parents.

The issue you are running into is that you want to select a parent element based on the attributes a child has, but CSS does not have a parent-type selector due to how interpretation of CSS works.

What you would need to do is either

  1. put the attribute on the parent element, if it is your code
  2. put the pseudo-element on the child and you can do whatever you want with it, like this
1 Like