CSS Selector

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.

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 ?>


.products li {
    border: 1px solid #fefefe;

Hi you can use the begins (^) with attribute selector to target the starting part of the id.


<meta charset="utf-8">
<title>Untitled Document</title>
div[id^="divOff"]{border:1px solid red;margin:10px;}


<div id="divOff1">test</div>
<div id="divOff2">test</div>
<div id="divOff3">test</div>


Thanks PaulOb, Perfect.

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