I need a solution to handle two selectors inside an id for my element in CSS3

Question

I have one modal on my HTML so I created the following CSS. I gave it an id rather than a class as there is only ever one of these used on a page.

#modal {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 900px; 
    height: 300px;
    margin: auto;
}

On my page "subject" I want the modal to have a width of 900px and height of 300px. I assume the way to handle this is with an id of subject and 900/300 for width and height in the CSS.
On my page "city" I want the modal to have a width of 800px and height of 300px. I assume the way to handle this is with an id of subject and 800/300 for width and height in the CSS.

What's the best way for me to handle the CSS style for this? I know one solution would be to make modal a class and then use the id for the different sizes. But making something that only appears once on a page as a class does not seem right.

Is there some way in CSS that I can have an id of "modal-subject" and "modal-city" and then use some CSS selector to pick out the "modal" and "-city" so the CSS can handle this ?

Update:

It looks like What does the selector [class^="span"] do? might be the solution for this.

How would making it a class even help? You'd still have the problem that you can only have one CSS entry for the class. — Barmar, Oct 29 '13 at 08:21
@Barmar - The CSS class for modal could do everything except specify the width/height. The id would then specify width/height. — , Oct 29 '13 at 08:22
It is okay to make a class for one element. I'd make a class `.modal` without width and 2 new classes .modal#city with `width: 800px;`and .modal#subject with `width: 900px;` — Igl3, Oct 29 '13 at 08:23
Even if it is unique.. use classes. and do as shown in the below posts. — Mr_Green, Oct 29 '13 at 08:23

score 1 · Accepted Answer · answered Oct 29 '13 at 08:22

1

Each page would have a wrapper around the modal with the name of the page as a class, or you can use the body tag, for example

<body class="page-subject"> <!-- for the city page class would be "page-city" -->
 <div id="modal"></div>
</body>

And you would select the modal on the subject page by doing:

.page-subject #modal{ background:red; }

And for the city page you would have a wrapper with class page-city and you would select in in CSS the same way:

.page-city #modal { background:magenta; }

answered Oct 29 '13 at 08:22

BrownEyes

2,257
18
20

I think so far this is the most close of the solutions. Although I would specify page-subject as an id. – Oct 29 '13 at 08:26
Yes you can specify it as an ID instead of class, doesn't make a difference – BrownEyes Oct 29 '13 at 08:27
I just updated the question. Looks to me like [class^=“span”] might be able to handle what I need. Have you any experience with this? – Oct 29 '13 at 08:33

score 0 · Answer 2 · answered Oct 29 '13 at 08:21

0

If you have a container div with id city then you may try the following css:

#city #modal {
   width: 800px; 
}

answered Oct 29 '13 at 08:21

Aziz Shaikh

16,245
11
62
79

I realize I could do it with a container but I am not sure it's ideal. It is a way of getting around a problem not a way to solve the problem. – Oct 29 '13 at 08:23
I just updated the question. Looks to me like [class^=“span”] might be able to handle what I need. Have you any experience with this? – Oct 29 '13 at 08:34

score 0 · Answer 3 · answered Oct 29 '13 at 08:23

0

<div id="modal" class="subject">
</div>
<div id="modal" class="city">
</div>

and in your stylesheets

.city{
widht:800px !important;
}
.subject{
widht:900px !important;
}

answered Oct 29 '13 at 08:23

Sudheer

2,955
2
21
35

Thanks but I am not sure this is the perfect solution. I only have one subject and so making it as a class is a bit of a fudge. – Oct 29 '13 at 08:25
I just updated the question. Looks to me like [class^=“span”] might be able to handle what I need. Have you any experience with this? – Oct 29 '13 at 08:33
Not really, although it is a CSS3 selector – BrownEyes Oct 29 '13 at 08:40

score 0 · Answer 4 · answered Oct 29 '13 at 08:24

You could use classes to complementary the #modal

so, for example your #model looks like this:

#modal {
position: fixed;
height: 300px;
z-index: 1050;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

and then you'll have 2 classes:

#modal.small { width: 800px;}
#modal.big { width: 900px; }

now you can call your modal like this:

<div id="modal" class="big">content</div>

I need a solution to handle two selectors inside an id for my element in CSS3

4 Answers4