css reference an id with a colon

Posted on 2006-07-07
Medium Priority
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?

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

Accepted Solution

GrandSchtroumpf earned 500 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.
LVL 14

Expert Comment

ID: 17061510
why can't you do anything about the colon?

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

607 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