Simple issue HTML/CSS not working

Question

The stylesheet is linked correctly. I have not done HTML/CSS in ages, however, this seems straight forward. What is not correct?

.box{
width:100px;
height:100px;
}

.box #1{
border: 1px solid red;
}

.box #2{
border: 1px solid blue;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
The content of the document......
<div class = "box" id = "1"></div>
<div class = "box" id = "2"></div>
</body>
 
</html>

IDs cannot start with number, also id #1 is not inside of .box — Iłya Bursov, Jul 31 '18 at 20:18
@IlyaBursov to be clear, IDs can't start with numbers in CSS ([unless they're escaped](https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/)), they're valid in HTML5. — zzzzBov, Jul 31 '18 at 20:25

score 0 · Answer 1 · answered Jul 31 '18 at 20:18

0

Your css rules address any nested ids inside your divs. it should be

.box#1 {...}
.box#2 {...}

answered Jul 31 '18 at 20:18

bombyx mori

401
3
4

score 0 · Answer 2 · answered Jul 31 '18 at 20:19

0

Your selector for the border are nested selector targeting IDs inside of element with the class box.

Instead of:

.box #1 {your css properties;}

try:

#1 {your css properties;}

answered Jul 31 '18 at 20:19

Max

63
6

Simple issue HTML/CSS not working

2 Answers2