CSS does not select the child [closed]

Question

CSS does not select the child [closed]

Navigation

#1 by (4 votes)
#2 by (2 votes)

0

How do I make it work, I put the child in the CSS but it does not catch me. One is called segundo and the other inside it 1 . How do I not inherit?

#segundo {
  width: 1351px;
  height: 500px;
  background-color: white;
  margin:-10px;
  margin-top:-10px;
}

#1 {
  background-color: Blue;
  position:relative;
  top: 90px;
  left: 50px;
  width: 351px;
  height: 50px; 
}

css

asked by alberto 30.08.2017 в 00:44

source

2 answers

How can I validate that an INPUT TEXT does not accept special characters? ?!)) $ &. '! "@ & how to start Primary key from a predetermined number?

score 4 · Answer 1

The problem is that you have an ID that is just numbers. This is valid in HTML5 (not in previous versions where the names and IDs were stricter ), but it can bring problems in CSS where it is not for ID selectors . Hence the mistake you see.

One solution if you want to use a numeric-only ID would be to put in front of the number in the CSS selector. Actually what we would be doing is escaping the number in ASCII (where the character 31 in hexadecimal equals number 1, 32 to 2, 33 to 3, etc.). You can read more information in this W3C page .

Then it would not be #1 but # and it works:

#segundo {
  width: 1351px;
  height: 500px;
  background-color: white;
  margin: -10px;
  margin-top: -10px;
}

#segundo h1 {}

# {
  background-color: Blue;
  position: relative;
  top: 90px;
  left: 50px;
  width: 351px;
  height: 50px;
}

<div id="segundo">
  <h1>Prueba</h1>
  <div id="1">Hola</div>
</div>

Another option would be to use a attribute selector using the ID, something like this [id="1"] :

#segundo {
  width: 1351px;
  height: 500px;
  background-color: white;
  margin: -10px;
  margin-top: -10px;
}

#segundo h1 {}

[id="1"] {
  background-color: Blue;
  position: relative;
  top: 90px;
  left: 50px;
  width: 351px;
  height: 50px;
}

<div id="segundo">
  <h1>Prueba</h1>
  <div id="1">Hola</div>
</div>

Personally I would prefer to avoid problems and consider changing the ID in the HTML. Although I understand that it is not always possible.

score 2 · Answer 2

It does not work possibly by the identifier of your div, 1 in this case. Placing only one number is valid for HTML but not for CSS.

#segundo {
width: 1351px;
height: 500px;
background-color: white;
margin:-10px;
margin-top:-10px;
}
#segundo h1{

}
#primero{
background-color: Blue;
position:relative;
top: 90px;
left: 50px;
width: 351px;
height: 50px;   
}

<div id="segundo">
  <div id="primero">
    <h1>Hola</h1>
  </div>
</div>