can attribute selectors be used with styled-components?

Question

after doing a bit of research, I could not find information regarding the usage of attribute selectors (that is, [attr=value]) in styled-components. however, I still imagine it is highly possible for styled-components to support attribute selectors... but should it not, what are some equivalents of it?

for instance, if I have the code below

.squares li[data-level='1'] {
    background-color: var(--light);
}

.squares li[data-level='2'] {
    background-color: var(--medium);
}

.squares li[data-level='3'] {
    background-color: var(--dark);
}

.squares li[data-level='4'] {
    background-color: var(--darkest);
}

how do I achieve it via styled-components?

score 2 · Answer 1 · answered Mar 21 '22 at 20:24

It is very simple, need create styled component, example "Squares" and define styles for nested list items with attribute "data-value='N'"

const Squares = styled.div`
  li[data-level='1'] {
    background-color: var(--light);
  }

  li[data-level='2'] {
      background-color: var(--medium);
  }

  li[data-level='3'] {
      background-color: var(--dark);
  }

  li[data-level='4'] {
      background-color: var(--darkest);
  }
`

score 1 · Accepted Answer · answered Mar 23 '22 at 07:51

I figured it out; this is what I did:

const SquareListItem = styled.li`
        border-radius: 3px;
        border: 1px rgba(27, 31, 35, 0.06) solid;
        background-color: ${colour[0]};
        &[data-level='1'] {
            background-color: ${colour[1]};
        }
        &[data-level='2'] {
            background-color: ${colour[2]};
        }
        &[data-level='3'] {
            background-color: ${colour[3]};
        }
        &[data-level='4'] {
            background-color: ${colour[4]};
        }
        /* tooltip */
        &[data-tooltip] {
            position: relative;
            cursor: pointer;
        }

        &[data-tooltip]:before,
        &[data-tooltip]:after {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }

        &[data-tooltip]:before {
            position: absolute;
            z-index: 999;
            bottom: 150%;
            left: 100%;
            margin-bottom: 5px;
            margin-left: -90px;
            padding: 7px;
            width: 150px;
            border-radius: 3px;
            background-color: #000;
            background-color: hsla(0, 0%, 20%, 0.9);
            color: #fff;
            content: attr(data-tooltip);
            text-align: center;
            font-size: 10px;
            line-height: 1.2;
        }

        &[data-tooltip]:after {
            position: absolute;
            bottom: 150%;
            left: 50%;
            margin-left: -5px;
            width: 0;
            border-top: 5px solid hsla(0, 0%, 20%, 0.9);
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            content: ' ';
            font-size: 0;
            line-height: 0;
            z-index: inherit;
        }

        /* show tooltip content on hover */
        &[data-tooltip]:hover:before,
        &[data-tooltip]:hover:after {
            visibility: visible;
            opacity: 1;
        }
    `

can attribute selectors be used with styled-components?

2 Answers2