Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


CSS ID reconnize

Posted on 2012-08-14
Medium Priority
Last Modified: 2012-08-22
I have list of div tags are generated using a php loop. I id each div tag using "divItem_+(some random number)". My question is is it possible to set a CSS tag for these divs using the starting name if the tags. for example


Open in new window

Question by:Peiris

Expert Comment

ID: 38293819
I'd suggest adding a class to them all, in addition to the ID, so that you can target anything with that class.  For example:
<div class="allofthem" id="divItem_1"></div>
<div class="allofthem" id="divItem_2"></div>
<div class="allofthem" id="divItem_3"></div>

Open in new window

That way you can use

Open in new window

LVL 61

Accepted Solution

Julian Hansen earned 2000 total points
ID: 38294100
Yes you can try this
*[id*='divItem_'] {
	background: blue;

Open in new window

or if you specifically want to target div's
div[id*='divItem_'] {
	background: blue;

Open in new window

Full test code here
<!doctype html>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
	float: left;
	margin: 10px;
	background: red;
div[id*='divItem_'] {
	background: blue;

<div id="divItem_1"></div>
<div id="divItem_2"></div>
<div id="divItem_3"></div>
<div id="divItem_4"></div>
<div id="term"></div>

Open in new window

LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38294366
If you're trying to target all of them, then absolutely go with a class per WebDevEM's post.

Beware of using general selectors like * or div or regex: [class^="grid-"]. They are the slowest to render. It won't make much of a difference in a small website with a couple of divs, but the minute you start adding more DOM elements, you'll be asking for trouble.  Have a look here for more on CSS preformance:

LVL 53

Expert Comment

ID: 38297060
I'd suggest adding a class to them all, in addition to the ID, so that you can target anything with that class.

WebDevEM is 100% correct. That is best practice.  If you like nightmare maintenance easily broken pages, and looking foolish then by all means explore other options, but not only is this best practice it is no more work than trying something screwy. You are already generating with php so you have one line of code to change, and a simple non-complex and efficient rule to put in the CSS.


Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question