WTF WTF - 5 months ago 10
CSS Question

How to apply a pseudo class to some elements in LESS

I don't know if I named the title right or have the right terminology but I'm using LESS.

What I want is to apply arrows on some

<ul>
s while the default is no style. So anytime I want arrows, I want to somehow explicitly say so in code.

I tried adding a pseudo class called
.arrow
:

ul {
margin: 0;
padding: 0;
list-style-type: none;
}

li {
.arrow{
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
}


Then tried to apply it like this:

<ul className="arrow">
<li><span className="ink-badge black small">Consulting</span></li>
</ul>


but no luck. I'm not doing this right; any ideas here?

Answer

className is the IDL attribute. In HTML you should use the content attribute, which is called class.

And .arrow is a class selector, not a pseudo-class.

And in selectors, place ancestors at the left (outer block in LESS).

body {
  margin-left: 2em;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.arrow > li {
  content: "";
  border-color: transparent #111;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
}
<ul class="arrow">
  <li><span class="ink-badge black small">Consulting</span></li>
</ul>

Comments