?
Solved

css reference an id with a colon

Posted on 2006-07-07
4
Medium Priority
?
947 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 30

Accepted Solution

by:
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.
0
 
LVL 14

Expert Comment

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

765 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