CODEWITHSUNDEEP
css
felix001
felix001

Reputation: 16741

CSS - Div inside a Div

I currently have the following code.

<div id="1">
 <div id="2">
  <div id="3">
  </div>
 </div>
</div>

But I cant seem to figure out how I select the div 3 (??). Any ideas ?

Upvotes: 2

Views: 11336

Answers (2)

David Thomas
David Thomas

Reputation: 253485

Outside of HTML5 an id beginning with a number is invalid HTML; however with CSS you could, ordinarily, select that div with the following:

As posted by Guffa, the #3 id-based selector in this answer is wrong, the #3 needs to be escaped to #\33 (though I'll explain no further (see his answer!), to avoid shameless plagiarism/repetition)

#3 {
    /* CSS */
}

This approach uses an id-based selector (only one element in the document may use a given id, so this is a unique identifier), and is the id-name prefaced with the # sign.

The following, however, is still valid:

div > div > div {
    /* CSS */
}

This approach uses the immediate child > combinator, and will select a div that is the direct child of a div (no intervening elements between the two) which is, itself, the immediate child of another div element.

References:

Upvotes: 5

Guffa
Guffa

Reputation: 700800

When you have an identifier that starts with a digit, you have to use a character escape to write the CSS rule to match it:

#\33 { ... }

The 33 is the hexadecimal code for the character 3.

If possible, you should avoid having an id that is a number. Using it gets complicated, both from CSS and from Javascript.

Upvotes: 2

Related Questions