I am working with a site that is pulling product info from a sql database. All products are pulled using an unique id.
Product One - #divOff1
Product Two - #divOff2
With css, can I style all these with say a border, if so how would i select the id’s with the consecutive values without having to create css for each product.
#divOff[] {
border: 1px solid #fefefe;
}
i would guess somehow using substring matching attribute selectors.
https://www.w3.org/TR/selectors/#attribute-substrings
SamA74
April 1, 2016, 8:19pm
2
Unless I’m missing something, wouldn’t you use a class common to all?
.product {
border: 1px solid #fefefe;
}
Though it really depends on your html or how your html is being built by the script.
<h1>Product List</h1>
<ul class="products">
<?php foreach($products as $prod) : ?>
<li><h2><?php echo $prod['name']; ?></h2>
<p><?php echo $prod['desc']; ?></p>
<p class="price"><?php echo $prod['price']; ?></p></li>
</php endforeach ?>
</ul>
with
.products li {
border: 1px solid #fefefe;
}
PaulOB
April 1, 2016, 8:28pm
3
reldridge:
divOff1
Hi you can use the begins (^) with attribute selector to target the starting part of the id.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div[id^="divOff"]{border:1px solid red;margin:10px;}
</style>
</head>
<body>
<div id="divOff1">test</div>
<div id="divOff2">test</div>
<div id="divOff3">test</div>
</body>
</html>
2 Likes
system
Closed
July 2, 2016, 3:29am
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.