CSS ID naming problem

**denhamd2** · 07-30-2008, 08:52 AM

Hi,

I'm working on a dynamically driven site with 2 links:

Code:

<a href="link1.html" id="Link Mine">Link 1</a>
<a href="link2.html" id="Link Yours">Link 2</a>

I don't have access to change the IDs on the links (get rid of the spacing in the ID names). Is there any way of styling the 2 links differently in CSS even though there is that space in the ID names?

Thanks in advance

**rangana** · 07-30-2008, 09:10 AM

You can try to access a element on CSS:

Code:

a{font-weight:bold;text-decoration:none;}

But that would be applied on all the <a> elements in your page.

If you wish to style only the two links, then you might give it a go to use JS instead:

Code:

<script type="text/javascript">
window.onload=function(){
for(var i=0;i<2;i++){
document.getElementsByTagName('a')[i].style.fontWeight='bold';
document.getElementsByTagName('a')[i].style.textDecoration='none';
}
}
</script>

This changes the font-weight to bold and removes the underline of the first 2 links on your page.

Hope it helps.

**denhamd2** · 07-30-2008, 09:25 AM

The problem is there are loads of other links on the page and I think the javascript would affect them and I don't want to style all <a> tags, just those 2 with the IDs on them. Is it possible to do anything with those IDs in CSS?

**rangana** · 07-30-2008, 09:35 AM

I have this fear that CSS can't do it. Whitespace is used as selectors in CSS. There could be two options:

Find a way so that the id's don't have spaces
Use JS to get your goal

For the last option, try this script instead:

Code:

<script type="text/javascript">
window.onload=function(){
for(var i=0,a=document.getElementsByTagName('a');i<a.length;i++){
if(a[i].getAttribute('id').indexOf(' ')!=-1){
a[i].style.fontWeight='bold';
a[i].style.textDecoration='none';}}}
</script>

This will change the style of the <a> element that has an ID attribute with space on it.

Hope it helps.

**codeexploiter** · 07-30-2008, 09:54 AM

Check the following code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">
		.special{
			font-weight:bold;
			text-decoration:none;
			color:red;
		}
		</style>
		<script type="text/javascript">
		function applyCSSClass(){
			var elIds = ["Link Yours","Link Mine"]; //You want to change the style of elements with these IDs.
			var clsName = "special"; //Specify the CSS class name which needs to be applied on the selected elements.
			for(var i = 0; i < elIds.length; i++){
				document.getElementById(elIds[i]).className = clsName; //Apply the CSS class on the selected elements.
			}
		}
		window.onload = function(){
			applyCSSClass(); //After the DOM load invoke the function that applies the CSS style on selected elements.		
		}
		</script>
	</head>
	<body>
		<a href="http://www.yahoo.com" id="Link Yours">Yahoo!</a><br/>
		<a href="http://www.Clusty.com" id="c1">Clusty</a><br/>
		<a href="http://www.dynamicdrive.com" id="c2">DD</a><br/>
		<a href="http://www.google.com" id="Link Mine">Google</a><br/>
		<a href="http://ejohn.org/" id="c3">John Resig</a>
	</body>
</html>

The idea is something like this you store the element IDs which you want to apply a new style. In the above code I've created a CSS class and applied that class on the needed elements. So whatever style you want to can be put into that class.

I have highlighted all the important section in the code.

If you open this page in browser only the first and the fourth link will have a red color, no underlining and bold in nature. Rest of the links will be skipped.

You can use the same principle in your case also.

Hope this helps.

**codeexploiter** · 07-30-2008, 09:57 AM

Originally Posted by rangana

I have this fear that CSS can't do it. Whitespace is used as selectors in CSS. There could be two options:

Find a way so that the id's don't have spaces
Use JS to get your goal

For the last option, try this script instead:

Code:

<script type="text/javascript">
window.onload=function(){
for(var i=0,a=document.getElementsByTagName('a');i<a.length;i++){
if(a[i].getAttribute('id').indexOf(' ')!=-1){
a[i].style.fontWeight='bold';
a[i].style.textDecoration='none';}}}
</script>

This will change the style of the <a> element that has an ID attribute with space on it.

Hope it helps.

This will change all those anchor elements with an ID that contains a space character na.

**rangana** · 07-30-2008, 10:05 AM

Originally Posted by codeexploiter

This will change all those anchor elements with an ID that contains a space character na.

Yes. Indeed the purpose of the script given.
Apply a style to the element whose ID has a space on it (it was intended).

The code you've provided could be a way to go too. A proof that there are multiple ways to skin a cat

**codeexploiter** · 07-30-2008, 10:09 AM

Originally Posted by rangana

Yes. Indeed the purpose of the script given.
Apply a style to the element whose ID has a space on it (it was intended).

The code you've provided could be a way to go too. A proof that there are multiple ways to skin a cat

The point here is if one identifies the element IDs on which he/she wants to apply the styles then what is the point in scanning through all the anchor elements unnecessarily especially he mentioned that his page has large number of anchor tags in it.

**rangana** · 07-30-2008, 10:25 AM

My script was a response from the OP's aim:

Originally Posted by denhamd2

I don't have access to change the IDs on the links (get rid of the spacing in the ID names). Is there any way of styling the 2 links differently in CSS even though there is that space in the ID names?

From above highlighted, I've written a script to scan through all the anchor tags that has an id attribute with the space in its value. On my end, I thought that the anchor elements s/he want to set a style are those that cannot be styled via CSS, and that is having space on it.

These might be "unnecessary", but that's my thought, I could be at mistake (nothing usual) and at any point, it's up for the OP to decide which one s/he think might suit his/her needs.

Thread: CSS ID naming problem

Thread Tools

Search Thread

CSS ID naming problem

Bookmarks

Bookmarks

Posting Permissions