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
?
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;
}
`