1

In answering a question on SO I tried to insert some basic CSS. The CSS renders correctly on Codepen but on SO it appears the [attribute*=value] selector does not work.

The example below should render like this:

enter image description here

Notice the larger amount of gutter space.

Is this a known issue on SO?

.cat {
  height: 100px;
}

[class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

.cat-inner {
  height: 100%;
  padding: 10px;
  background-color: #666;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="categories">
  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-12 cat">
        <div class="cat-inner">
          <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
    </div>
    <div class="row mt-1">
      <div class="col-8 cat">
        <div class="cat-inner">
          <h4>Space Travel</h4>
        </div>
      </div>
      <div class="col-4 cat">
        <div class="cat-inner">
          <h4>Worm Holes</h4>
        </div>
      </div>
    </div>
  </div>
</section>

1
  • We're inserting your CSS into the <head> and then Bootstrap's CSS is getting loaded in the <body>. Since the attribute selector has the same specificity as Bootstrap's class selector, Bootstrap's padding styles override your padding styles. The attribute selector is triggering (there's nothing we would possibly be doing to stop that) - it's just the styles you apply with it are all ignored due to later styles that get applied. For this to be fixed, we'd need to support inserting external resources into the head.
    – animuson StaffMod
    Jun 25, 2017 at 16:53

0

Browse other questions tagged .