Css div selector multiple classes

338

July 09, 2017, at 5:07 PM

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?

Answer 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.

Answer 2

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>

Answer 3

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

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

Answer 4

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>

Answer 5

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).