define a CSS3 Attribute Selectors in less css

Question

I am trying to do a stuff related to CSS3 Attribute Selectors with less css...

What i am trying to do is, i have this following class which is in use in my code:-

*[class^="ui-icon-"] { 
    /*My Styles*/
}

That should be implemented in a manner that the styles of it will be implemented to another class that is defined after that, let say:-

/*Less*/
.another-class {
   *[class^="ui-icon-"];
}

/*Output CSS*/
.another-class {
   /*My Styles*/
}

Here, this is currently showing error on my webpage, does this have any solution?

What pseudo-class are you trying to define? All I see here is a class and an attribute. — BoltClock
– BoltClock, Commented May 28, 2013 at 7:23

Community · Accepted Answer · 2017-05-23 11:50:11Z

3

One Other Way In LESS 1.4

Martin's answer is very good. Just for completeness, there is another way to do it in LESS 1.4 by extending the second selector. This could allow you to define the styles in your attribute selector first:

*[class^="ui-icon-"] { 
    /*My Styles*/
}

.another-class {
  &:extend(*[class^='ui-icon-'] all);
}

Which then groups them for final CSS output like so:

*[class^="ui-icon-"],
.another-class {
  /*My Styles*/
}

You can, of course, reverse how you define it:

.another-class  { 
    /*My Styles*/
}

*[class^="ui-icon-"] {
  &:extend(.another-class all);
}

Giving a similar grouped output:

.another-class,
*[class^="ui-icon-"] {
  /*My Styles*/
}

You can also add other styles needed:

*[class^="ui-icon-"] { 
    /*My Styles*/
}

.another-class {
  &:extend(*[class^='ui-icon-'] all);
  /* Other Styles for another-class */
}

Giving this output:

*[class^="ui-icon-"],
.another-class {
  /*My Styles*/
}
.another-class {
  /* Other Styles for another-class */
}

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered May 28, 2013 at 13:48

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Turjak Over a year ago

another +1 from me - for completing my answer with such an elegant solution once again ... I am a big fan of 1.4 ^_^

Community · Accepted Answer · 2017-05-23 12:11:19Z

2

There are two problems with trying to call an attribute selector like this.

Mixins (reusable rules) in LESS should start with . or #, and
they can not include characters like ", =, * and ^ (if they are unescaped).

So one solution is the one laat suggests in his answer, where you add an extra selector to your rule, that you can call later as a mixin. Another way would be to define all your properties in .another-class (as this selector is a valid mixin name) and call this from inside the rule with the attribute selector, like this:

*[class^="ui-icon-"] {
    .another-class;
}

.another-class {
    /*My Styles*/
}

Or yet another way to add a set of properties to miltiple rules would be using a parametric mixin. Like this:

.mystyles(){/*My Styles*/}

*[class^="ui-icon-"] {
    .mystyles;
}

.another-class {
    .mystyles;
}

In both examples the rendered CSS will look like this:

*[class^="ui-icon-"] {
  /*My Styles*/
}
.another-class {
  /*My Styles*/
}

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered May 28, 2013 at 9:06

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

1 Comment

ScottS Over a year ago

+1 for the good answer, you missed at least one other way though, so I added an answer of my own to make the answers to this question more complete.

laat · Accepted Answer · 2013-05-28 08:06:49Z

1

I'm not sure how it should actually be done, but this works for me.

._ui-icon, *[class^="ui-icon-"] { 
    color: black;
}

.another-class {
   ._ui-icon;
}

answered May 28, 2013 at 8:06

laat

112 bronze badges

Collectives™ on Stack Overflow

define a CSS3 Attribute Selectors in less css

3 Answers 3

One Other Way In LESS 1.4

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

One Other Way In LESS 1.4

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related