can I have css selector to match widget-logs and widget-chart like widget-* {...}

Question

I am building a widgetized dashboard in which I am rendering widgets like widget-logs, widget-chart & widget-list etc.

I want to apply common styling to widgets like given below which doesn't work but would like to know is something else I can use for my use case:-

widget-* {
   header { font-weight: bold; }
}

instead of:-

widget-logs, 
widget-chart,
widget-list {
   header { font-weight: bold; }
}

of course: https://stackoverflow.com/questions/41832255/css-class-name-selector-name-starts-with/41832387#41832387 — turbopixel, Apr 23 '18 at 10:25
my markup doesn't have a class so exploring does we can have something like widget-* {...} — veetesh jain, Apr 23 '18 at 10:36
@Temani Afif I am aware of attribute selector I am looking for something similar to CSS tag selectors like widget-* {...} instead of having classes on each element. — veetesh jain, Apr 23 '18 at 10:37
so you need to make your question more clear and include the code inside the question ... by the way what you want is not possible — Temani Afif, Apr 23 '18 at 10:39

score 0 · Answer 1 · answered Apr 23 '18 at 10:28

0

[class^='widget']{ /* class name starts with widget */

}
[class$='widget']{ /* class name ends with widget */

}
[class*='widget']{ /* contains widget in class name */

}

answered Apr 23 '18 at 10:28

Gautam Naik

8,990
3
27
42

can I have css selector to match widget-logs and widget-chart like widget-* {...}

1 Answers1