CODEWITHSUNDEEP
cssescapingless
mikemaccana
mikemaccana

Reputation: 123098

less.css - how to style / escape square brackets

I have a web app (which I did not create) that includes the following element: 

<label for="photo[]"></label>

Yes, I am aware this is suboptimal but the person that created the app can't be convinced any alternative is possible. I was wondering if it was possible to style this element in less.css without refactoring the code?

Muy first instinct was:

label[for=photo\\[\\]]

but this doesn't work. I've also tried:

label[for=photo\[\]]

and

label[for=photo\\\[\\\]]

How can I select this element, by its label, for styling in less?

A JSFiddle example.

Upvotes: 2

Views: 1121

Answers (2)

Ian Roberts
Ian Roberts

Reputation: 122364

You could use a Unicode escape:

label[for=photo\5B \5D ]

Upvotes: 0

Nick Tomlin
Nick Tomlin

Reputation: 29211

I might be missing the point, but have you tried quoting the attribute selector?

Less

label[for="photo[]"] {
    background-color: red;
    width: 100px;
    height: 100px;
    display: block;
}

Seems to be applying the styles properly (fiddle).

On a side note, Codepen is a great alternative to JSfiddle with less/sass (and even HAML/Markdown) support. I've made an example codepen here:

http://codepen.io/NickTomlin/pen/gakci

Upvotes: 3

Related Questions