How to apply in page style to different divs

Question

I need to apply styles dynamically when the page is served and as I am not applying the style directly to the element I use an in-page <style> line.

However, this will apply the last seen style to all elements on the page. I tried to get around this by uniquely identifying the element, but this seemed to stop the tag from working.

See this fiddle for a simplified version https://jsfiddle.net/jc8o0ymL/2/ Both inner boxes are green.

If I try and separate them by using the ID when I attach a # styling to the tag they stop working.

second fiddle here https://jsfiddle.net/bk3qbpdk/1/

Using the same ID (third fiddle: https://jsfiddle.net/z1zsrrhg/) works, in that the style tag is applied but has the same problem of attaching the last style in the page to all elements, so it is not using # that is the problem.

Why is this not allowing unique ID references? And no, adding the styling to an external style sheet is not the answer I am looking for.

[EDIT] Ok a bit more information as I can see the answers are focussing on CSS styling that I am already aware of.

The actual behaviour is to allow a div inside a div to 'pop-up' on hover (using CSS only, not javascript), therefore I need to add the style to the parent :hover element. This is why I can't apply a class directly to the affected element.

<div id="1" class="Parent">
<div class="Popup"></div>
</div>

The css need to be

.Parent:hover div.Popup { do stuff }

The HTML is being generated by a PHP object. So when that object is called twice on the same page, it produces the scenario described in my first Fiddle.

This all works fine, but it means that the popup amount of all elements on the page needs to be the same. I would like them to be able to be different. Hence I thought to add a (unique) ID to each element and reference that instead. Each time the object is called it can output an in page style unique to the element it is about to create.

Only it doesn't work, second Fiddle.

I don't know why this doesn't work. Is it a quirk of in-page styles, is it in the standard? Or have I got something wrong, is there a fix?

Answer 1

If you want multiple elemets to share the same css rules you should use the class attribute.

If you're using ID then add # before the ID in the css. In any case, don't use an ID more than once, it needs to be unique.

div{
  width: 100px;
  height: 70px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

.ex1{
   background-color: green;
}

#ex2{
   background-color: blue;
}

<div class="ex1">
 </div>
<div class="ex1">
 </div>
<div id="ex2">
 </div>

Answer 2

Duplicate style declarations like that are going to end up in having one of them ignored. Also while class declarations can start with a number, you can't do that with IDs. Notice that I changed your outer div IDs from #1 to #outer1 and #2 to #outer2.

.outer{
  width:100px;
  height:100px;
  background-color:blue;
}
.inner{
  width:50px;
  height:50px;
  margin:10px;
}

<style>#outer1 div.inner{background-color:red}</style>
<div id="outer1" class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

<style>#outer2 div.inner{background-color:green}</style>
<div id="outer2" class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

Answer 3

If you can modify the markup, use different classes to modify each element.

<style>
  .outer {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .inner {
    width: 50px;
    height: 50px;
    margin: 10px;
  }
  .inner--red {
    background-color: red;
  }
  .inner--green {
    background-color: green;
  }
</style>

<div class="outer">
  content
  <div class="inner inner--red">
    more content
  </div>
</div>

<div class="outer">
  content
  <div class="inner inner--green">
    more content
  </div>
</div>

---

If you cannot modify the markup, use pseudo-classes.

<style>
  .outer {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .inner {
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
  }
  .outer:nth-of-type(2) .inner {
    background-color: green;
  }
</style>

<div class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

<div class="outer">
  content
  <div class="inner">
    more content
  </div>
</div>

Answer 4

ID's are supposed to be unique, just changing the name would be enought:

<style>#outer2 div.inner {background-color:green;}</style>
<div id="outer2" class="outer">
[...]

but the question is more about how browser render style, so please check this answer. It worth a read:

How is CSS applied by the browser, and are repaints affected by it?

UPDATE

An ID cannot start with a number (html4 specs)

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

More info: https://www.w3.org/TR/html4/types.html#type-id

Fiddle: https://jsfiddle.net/2k7c0qto/