Css regex ,

HTML & CSS
1

I am having a few elements with similar names.


<div class="featured"> 
				<img id="img1_active" src="../public/images/featured/01.jpg" alt="sky01" width="680" height="370" /> 
				
				<img id="img2_inactive" src="../public/images/featured/02.jpg" alt="sky02" width="680" height="370" /> 
				
				<img id="img3_inactive" src="../public/images/featured/03.jpg" alt="sky03" width="680" height="370" /> 
	
				<img id="img4_inactive" src="../public/images/featured/04.jpg" alt="sky04" width="680" height="370" /> 
				
				
			</div>

I want to select them all using a regex.
like for example see the following.


#img(.)_inactive{
/*code goes here*/
}
#img(.)_active{
/*code goes here */
}

select all img ids followed by a single character.
or all img ids followed by a digit .


#img["/[0-9]*"/]_inactive{
/*code goes here*/
}
#img["/[0-9]*"/]_active{
/*code goes here */
}

Unfortunately the above 2 examples did not work.
Are regular expressions available in css ?

2

No, regex, the way you’re expecting, has yet to make an appeareance in CSS.

You’re looking for attribute selector: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors.

No IE6 I’m afraid: http://www.quirksmode.org/css/selector_attribute.html.

Examples: http://www.quirksmode.org/css/selector_attribute.html.

3

There are no regex in CSS (thank god!)
But your code, well… it begs a bunch of questions:

  1. are they recieving unique values or not?

  2. why put the active/inactive on the ID, that’s what CLASSES are for!

  3. if the majority of them would be getting the same class and have a perfectly good ID or class on a element wrapping them, like your DIV, what do they need a class OR ID for?

  4. I would also use the old programming rule of not using terms similar to existing values like pseudostates – “active” is a pseudostate and as such too easily confused, which is why I prefer “current”

Basically, it feels like your code is suffering from a nasty case of “not every ejaculation deserves a name”

ID is for unique values, TAG is for common values, classes are for different values that may occur more than once.


<div class="featured"> 
	<img id="img1" class="current" src="../public/images/featured/01.jpg" alt="sky01" width="680" height="370" /> 
	<img id="img2" src="../public/images/featured/02.jpg" alt="sky02" width="680" height="370" /> 
	<img id="img3" src="../public/images/featured/03.jpg" alt="sky03" width="680" height="370" /> 
	<img id="img4" src="../public/images/featured/04.jpg" alt="sky04" width="680" height="370" /> 
</div>

.featured img {
// all images inside .featured
}

#img1 {
// all values unique to img1
}

.featured img.current {
// values unique to the current/active img
}

Nothing as fancy as a regex needed!

4

ID is for unique values, TAG is for common values, classes are for different values that may occur more than once.

I didn’t knew about that rule.
I’ve made the code a little bit more optimized.


<div class="featured"> 
				<img id="current" src="../public/images/featured/01.jpg" alt="sky01" width="680" height="370" /> 
				
				<img  src="../public/images/featured/02.jpg" alt="sky02" width="680" height="370" /> 
				
				<img  src="../public/images/featured/03.jpg" alt="sky03" width="680" height="370" /> 
	
				<img  src="../public/images/featured/04.jpg" alt="sky04" width="680" height="370" /> 
				
				
			</div>

CSS part

 
.featured img{ 
 display:none;
}
.featured #current{ 
display:block;
}

It saved me some space :slight_smile:
Thank you.
And also thanks for making it clear about the css attribute selectors.
i’ve found out that this css also works


<img id="image current" src="../public/images/featured/01.jpg" alt="sky01" width="680" height="370" /> 
				
<img id="image"  src="../public/images/featured/02.jpg" alt="sky02" width="680" height="370" /> 
				
<img id="image"  src="../public/images/featured/03.jpg" alt="sky03" width="680" height="370" /> 
	
<img  id ="image" src="../public/images/featured/04.jpg" alt="sky04" width="680" height="370" /> 

CSS 
---- 
.featured img [id~=current] {
  display:block; 
}
.featured img #image{
 display:none; 
}

but it doesn’t validate because of the repeated ids
classes are the way to do it.

ID is for unique values, TAG is for common values, classes are for different values that may occur more than once.

Can you use tags for non-common values.

5

So long as you use a ID or class to change the common ones you could… You can either inherit off the parent element’s ID or class, or target it directly.

I often have five or six different paragraph stylings – as a rule I set the like things about P using just P, the things unique to a section using whatever is on that section’s DIV (.newsPost P, .sideBar P} and then should one or two of them be unique, then put a class on them.

By the book you can put as many classes on as many elements as you like – the key is to just make sure you don’t overdo it when you don’t have to.

Most important rule of all – the less code you use, the less there is to break. A lesson lost on many modern developers… (Just look at all the endless Javascript for NOTHING people are ruining perfectly good websites with)

– edit –
oh, and in your second code, that’s why you use CLASS instead of ID on those. ID’s are unique, can only be used once. ALSO an element is only supposed to have ONE ID.

6 

<img id="current" src="../public/images/featured/01.jpg" alt="sky01" width="680" height="370" /> 
				
<img src="../public/images/featured/02.jpg" alt="sky02" width="680" height="370" /> 
				
<img src="../public/images/featured/03.jpg" alt="sky03" width="680" height="370" /> 
	
<img src="../public/images/featured/04.jpg" alt="sky04" width="680" height="370" /> 

CSS 
---- 
.featured img [id~=current] {
  display:block; 
}
.featured img {
 display:none; 
}

Will this validate ? :slight_smile:

Also, you can’t have multiple values for id, only for class. So img id=“image current” has to be img id=“current”

As an exercise, you could go with the alt attribute values instead :wink: They seem pretty unique to me.

7

Personally I’d not use an id for “current”, I’d use a class - but that’s because I might have another element on the page I might want to call ‘current’ – that’s where inheriting off the parent comes into play.

8

^ True.