CODEWITHSUNDEEP
htmlcss
JoaoFilipeClementeMartins
JoaoFilipeClementeMartins

Reputation: 1820

number of css ids are possible to add to css?

I have a html file that contains three divs:

<div id="rooms"></div>
<div id="chatters"></div>
<div id="chat-console"></div>

and i want to define several style to each and some styles are the same. So i created the following css:;

#chatters, #rooms { width: 100px, margin: 0 1em 0 0; float: left; list-style: none; }
#chatters, #chat-console, #rooms { height: 300px; overflow: auto; padding: 1%;}
#chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; }

in the third css line there is also one chat form div but there is no concern to the case.

Problem: my rooms div doesn't get the border line specified in the third css specification. Although chat-console and chatters do.

When i inspect the code in the browser this is what i get for rooms div:

#chatters, #chat-console, #rooms {height: 300px; overflow: auto; padding: 1%;}
#chatters, #rooms { width: 100px; margin: 0px 1em 0px 0px; float: left; list-style: none outside none;}

but never see the line #chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; } where it is set the border for the div.

Although when i inspect chatters and chat-console div i have the css line #chat-console, #chatters, #chat-form, #rooms input[type=text] { border: 1px solid #ccc; }

Why is this happening? i set the rooms div to have that css rule as well. Why does it not appear? Is there a limit in the number of ids to add before the rule and i exceeded that number so it stopped working?

Upvotes: 0

Views: 47

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

#rooms input[type=text] { border: 1px solid #ccc; }

Does not set the border for the #rooms div, it only sets the border on the input that is a child of the #rooms div.

#chat-console, #chatters, #chat-form, #rooms { border: 1px solid #ccc; }

for the border on the div is what you are after I think.

or

#chat-console, #chatters, #chat-form, #rooms, #rooms input[type=text] { border: 1px solid #ccc; }

if you want the border on the div and the input.

Upvotes: 6

Related Questions