Css div selector multiple classes

Question

I am working on a wordpress theme and I have a this code in HTML:

<body>
        <div class="container-fluid mytheme-container" >
        <div class="container-fluid col-lg-offset-5 col-lg-7 404page"> 
                    <p id="404">404</p>
                    <p id="page-not-found">Page not found... :(</p>
        </div>
        </div>
</body>

I want to add height to the last div and I thought my css in this way:

body > div.container-fluid.mytheme-container > div.container-fluid.col-lg-offset-5.col-lg-7.404page {
    height: 100vmin;
}

That doesn't work, just if I let the selector like this:

body > div.container-fluid.mytheme-container > div {

}

But I think that this will apply to every child of mytheme-container and I don't want that. So, how can I get the selector for that div ( 404page ) in a more specific way than the last one?

why don't you add a new class to your div and define a style for it? — Sudarsh
– Sudarsh, Commented Jul 9, 2017 at 8:38
It seems a good idea, but I would like to know how to compose that selector :) — Cristi Cazan
– Cristi Cazan, Commented Jul 9, 2017 at 8:42

Niet the Dark Absol · Accepted Answer · 2017-07-09 08:43:08Z

1

Classes and IDs should not start with numbers. While it's possible to make them work, it's a hassle and kind of goes against the spirit of "identifiers" in every other programming language anyway.

Best to keep to the more-or-less global definition of "identifier", and use page-404 or similar - besides, that's more consistent with your other classes container-fluid, col-lg-offset-5 and so on.

answered Jul 9, 2017 at 8:43

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cristi Cazan Over a year ago

Thanks a lot for your answer. I've changed my class with "page-404" and now it is working :D

Niet the Dark Absol Over a year ago

@CristiCazan I'd also like to point out that basing selectors on "generic" things like col-lg-offset-5 is a generally bad idea, because what if you want to change the design slightly and make that a col-lg-offset-4 instead? You'd be best off just defining a style for .page-404 alone.

Shtut · Accepted Answer · 2017-07-09 08:42:53Z

I think your issue is the class '404page'. class names shouldn't begin with a number.

If you can you should change the class name to 'page404' or something similar, if not, I think you can still work with the other classes as selectors (without 404page).

See working example here:

body > div.container-fluid.mytheme-container >  div.container-fluid.col-lg-offset-5.col-lg-7 {
    color:red;
}
//same, but without the 404page class

<body>
        <div class="container-fluid mytheme-container" >
        <div class="container-fluid col-lg-offset-5 col-lg-7 404page"> 
                    <p id="404">404</p>
                    <p id="page-not-found">Page not found... :(</p>
        </div>
        </div>
</body>

Jakir Hossain · Accepted Answer · 2017-07-09 08:47:28Z

0

You want apply css to last div, flow this code.

body > div.container-fluid.mytheme-container > div:last-child {

}

answered Jul 9, 2017 at 8:47

Jakir Hossain

2,51720 silver badges24 bronze badges

Comments

Ehsan · Accepted Answer · 2017-07-09 08:51:41Z

0

you Should not start class with number.if insert a litter with first 404page like a404page your code works.

body > div.container-fluid.mytheme-container > div.container-fluid.col-lg-offset-5.col-lg-7.a404page {
    background: red;
}

        <div class="container-fluid mytheme-container" >
        <div class="container-fluid col-lg-offset-5 col-lg-7 a404page"> 
                    <p id="404">404</p>
                    <p id="page-not-found">Page not found... :(</p>
        </div>
        </div>

answered Jul 9, 2017 at 8:51

Ehsan

13k3 gold badges27 silver badges46 bronze badges

Comments

Vadim Ovchinnikov · Accepted Answer · 2017-07-09 09:00:41Z

0

Technically you can have classes starting with digits and selectors for them, but you have to escape digits for selector. Also it's possible to add other characters (e.g. !, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, {, |, }, and ~) but they need to be escaped. Here is demo

div {
  width: 200px;
  height: 200px;
  background-color: tomato;
}

/* escaped selector */
#\34 04 {
  border: 5px solid lime;
}

<div id="404"></div>

More info about this. Also CSS escaping online.

But of cource this doesn't look maintainable and I would recommend you to consider changing you identifiers starting with letter (or at least hyphen or underscore).

edited Jul 9, 2017 at 9:00

answered Jul 9, 2017 at 8:51

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

Collectives™ on Stack Overflow

Css div selector multiple classes

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related