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:
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 & 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>
<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.