Solved

css reference an id with a colon

Posted on 2006-07-07
4
936 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
ID: 17057694
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
ID: 17061510
why can't you do anything about the colon?
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

778 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