Solved

css reference an id with a colon

Posted on 2006-07-07
4
931 Views
Last Modified: 2012-06-27
I want to create a css rule specific to an id, but the id has a colon embeded. I can't do anything about
the colon. In the example below, aaa works as expected, but ccc:ddd is not affected by the css, the
table appears normally, not width 100%. I want the ccc:ddd to work like the aaa. How can I do this?

<html>
<head>
<style>
      table#aaa {width:100%}
      table#ccc:ddd {width:100%}
</style>
</head>
<body>
<table id="aaa" style="background-color:green;color:white"><tr><td>aaa</td></tr></table>
<br/>
<table id="bbb" style="background-color:green;color:white"><tr><td>bbb</td></tr></table>
<br/>
<table id="ccc:ddd" style="background-color:green;color:white"><tr><td>ccc:ddd</td></tr></table>
</body>
</html>
0
Comment
Question by:lfrohman
4 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 125 total points
Comment Utility
Interesting question...  I did not find any information about this special case.
The W3C validator (http://jigsaw.w3.org/css-validator/) sees the selector as "table#ccc"

This is the workaround, but IE6 does not support it:
     table[id="ccc:ddd"] {width:100%}

For IE, you'll need to use another workaround... like adding a class.
0
 
LVL 14

Expert Comment

by:dfu23
Comment Utility
why can't you do anything about the colon?
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now