css attribute selector for numbering within id

Question

I'm wondering what would be a good way to combine CSS Attribute Selector to combine the following classes in one?

#c27-single-listing .element .pf-body .listing-details.item-count-3>ul>li, 
#c27-single-listing .element .pf-body .listing-details.item-count-2>ul>li,
#c27-single-listing .element .pf-body .listing-details.item-count-1>ul>li {
    width: auto !important;
    margin-right: 35px;
}

score 1 · Answer 1 · answered Apr 20 '20 at 18:23

#c27-single-listing .element .pf-body .listing-details[class*="item-count-"]>ul>li {
  width: auto !important;
  margin-right: 35px;
}

<div id="c27-single-listing">
  <div class="element">
    <div class="pf-body">
      <div class="listing-details item-count-1">
        <ul>
          <li>Content</li>
        </ul>
      </div>
    </div>
  </div>
</div>

is the closest you can get I think. From https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors:

*= value means contains at least one occurrence of value

|= value gives an exact match for one of a space-separated list of strings, like the class attribute, but is no good for matching just part of a class.

score 0 · Accepted Answer · answered Apr 20 '20 at 18:24

Closest you'll get is a wildcard selector, since you have two adjacent classes on listing-details. Deep CSS nesting like this is the reason systems like BEM exist: https://css-tricks.com/bem-101/

#c27-single-listing .element .pf-body .listing-details[class*='item-count-'] > ul > li {
    color: blue
}

<div id="c27-single-listing">
  <div class="element">
  Some other text
    <div class="pf-body">
      <div class="listing-details item-count-3">
        <ul>
          <li>line 1</li>
          <li>line 2</li>
          <li>line 3</li>
        </ul>
      </div>
      <div class="listing-details item-count-2">
        <ul>
          <li>line 1</li>
          <li>line 2</li>
          <li>line 3</li>
        </ul>
      </div>
      <div class="listing-details item-count-1">
        <ul>
          <li>line 1</li>
          <li>line 2</li>
          <li>line 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

css attribute selector for numbering within id

2 Answers2