CSS inheritance using auto generated number

Question

I have a list of contacts like this:

 <div id=\"contact $name\"> 
  Contact 1.
 </div>

 <div id=\"contact $name\"> 
  Contact 2.
 </div>
...and so on

$name is the name of the contact. I need to do it this way, because somewhere I'm using a javascript for show / hide details for a selected contact so I need a unique id.

I would like to put some style on id contact. I'm not very used with CSS but, I assume that there should exist the concept of inheritance for situations like that, right?

I tried to apply a testing style like:

#contact { font-size:20px; color:red; }

That should apply the style for all id's that have contact and if I want some particular style for contact 1, I should use something like #contact Contact 1 { bla bla bla }

The problem is that isn't working. What I'm doing wrong there?

EDIT

 <script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
             document.getElementById(elementid).style.display = '';
    } else {
            document.getElementById(elementid).style.display = 'none';
    }}</script>

As a side-note: Whitespace is [not allowed](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) in ID. You have to escape the whitespace by a leading backslash like so: `#contact\ Contact\ 1 { ... }` — Hashem Qolami, Jun 06 '14 at 19:42
@sdsanders, are you sure that this rule is still available in HTML 5? — SilenceIsGolden, Jun 06 '14 at 19:51
Yes. According to the spec: "The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters." — Steve Sanders, Jun 06 '14 at 19:58
Starting an attribute value with `\"` isn’t HTML. There is no such thing as “inertance”. Show valid HTML and valid CSS that actually reproduce the issue, and specify what the issue is. If JavaScript is relevant, include the “javascript” tag. — Jukka K. Korpela, Jun 06 '14 at 20:09
That html is in a php file. I need to use \ to avoid some conflicts. Anyway, the browser won't see it like `\"`, will see it simple `"`. — SilenceIsGolden, Jun 06 '14 at 23:27

score 4 · Answer 1 · answered Jun 06 '14 at 19:37

4

It may make more sense to use both an id and a classname in your markup like below:

<div class="contact" id=\"$name\"> 
    Contact 1.
</div>

<div class="contact" id=\"$name\"> 
     Contact 2.
</div>

And then target by class name in your css like:

.contact { font-size:20px; color:red; }

Overrides could then be applied based on id like:

#contact-1 { color:blue; }

That way you can apply your css to all contacts and still show/hide by id with javascript.

answered Jun 06 '14 at 19:37

lucasjackson

1,515
1
11
21

That looks great, but will broke my javascript show/hide script. I just edited my initial post, and I will appreciate a hint for solving that. – SilenceIsGolden Jun 06 '14 at 19:50
What are you passing as the elementid to your showHide function? – lucasjackson Jun 06 '14 at 19:56
The div's id `contact $name`. – SilenceIsGolden Jun 06 '14 at 19:57
As long as your $name variable produces a valid id, this should work. I created a fiddle showing this: http://jsfiddle.net/xHS6Z/ – lucasjackson Jun 06 '14 at 20:06

score 1 · Answer 2 · answered Jun 06 '14 at 19:40

That should apply the style for all id's that have contact

An id should be unique to a single contact. If you want something to apply to multiple contacts you should use a class:

<div class="contact" id=\"$name\"> 
 Contact 1.
</div>

<div class="contact" id=\"$name\"> 
 Contact 2.
</div>

Then you can apply through out:

.contact { font-size:20px; color:red; }

If you want to apply other unique styles to certain contacts, you should look at how css selectors work: CSS Selectors Reference - w3schools

(You can add styles for odd or even children for example)

CSS inheritance using auto generated number

2 Answers2