CSS Selector

HTML & CSS
1

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

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;
}
3

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
5

Thanks PaulOb, Perfect.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.