Arthur Khusnutdinov Arthur Khusnutdinov - 4 years ago 93
CSS Question

Style-based CSS selector

Is it possible to declare css path, based on style of the element?
For example, I have two ul elements on the page. One of them has style

list-style-type: lower-alpha;
:

<ul start="1" style="list-style-type: lower-alpha;">


and second one ul has not
list-style-type
style :

<ul start="1">


I need to apply css to the ul element, that has
list-style-type
. How to write such css selector path?

The main problem is that I have numeric ul and lower-alpha ul elements on same page and I want to make bold numbers in alpha and numeric ul's. Ie, now I use

.ts4page ul,ol li:before {
content: counter(item, lower-alpha) ". ";
counter-increment: item;
font-weight: bold;
margin-bottom: 3px;
}


But it makes lower-alpha ALL ul's on the page, but not only ul, that have
style="list-style-type: lower-alpha;"
style.

Thank you!

Answer Source

You can use attribute selector [style="list-style-type: lower-alpha;"]

ul[style="list-style-type: lower-alpha;"] {
  color: green;
}
<ul start="1" style="list-style-type: lower-alpha;">
  <li>Li</li>
  <li>Li</li>
</ul>
<ul start="1">
  <li>Li</li>
  <li>Li</li>
</ul>

If you have more inline style you can use [attr*=value] to find list-style-type: lower-alpha; as substring

ul[style*="list-style-type: lower-alpha;"] {
  color: green;
}
<ul start="1" style="opacity: .7; list-style-type: lower-alpha; font-size: 12px;">
  <li>Li</li>
  <li>Li</li>
</ul>
<ul start="1">
  <li>Li</li>
  <li>Li</li>
</ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download