I'm having an issue with a CSS media query where the general style is being applied after the media query despite being above the media query in the cascade.
Example:
HTML:
<div id="myblock1">
<div>Block 1</div>
<div id="myblock2">Block 2</div>
<div>Block 3</div>
</div>
CSS:
#myblock1 div {
display:block;
background-color:#F00;
}
#media (min-width:600px) {
#myblock2 {
display:none;
}
}
Live demo: jsFiddle
In theory, all 3 blocks should be visible in windows of 600px width or less, and when larger the middle block should disappear, but that is not the case. Any ideas on why the ID/media query is being applied before the general styling?
That's because #myblock1 div is more specific than #myblock2 (1 ID + 1 element vs 1 ID).
You'll either need to be more specific, or add !important on the rule you're trying to override.
Be more specific: #myblock1 #myblock2 { display: none; }
Use !important: #myblock2 { display: none !important; }
In my opinion, the best solution would be to make the outer container less specific, by giving it a class name, rather than an ID:
<div class="myblock1">
<div>Block 1</div>
<div id="myblock2">Block 2</div>
<div>Block 3</div>
</div>
Then, the following will work fine:
.myblock1 div {
display:block;
background-color:#F00;
}
#media (min-width:600px) {
#myblock2 {
display:none;
}
}
The specificity of your selector isn't high enough, so it isn't overriding your previous rule. Try this one instead:
#media (min-width:600px) {
#myblock1 #myblock2 {
display: none;
}
}
Demo: http://jsfiddle.net/7aWpQ/2/
Add !important to display:none; than it's working.
#myblock1 div {
display:block;
background-color:#F00;
}
#media (min-width:600px) {
#myblock2 {
display:none!important;
}
}
Note: Because the media query is less specific than your main css. ie. #myblock1 #myblock2 { display:none; } should also work
Related
Everywhere on web I found that multiple css classes use a space as separator.
So, I'm write the following:
<div class="page hidden">
css
.hidden{
display:none;
}
Using the above code .hidden IS NOT hidden, but visible.
But using:
<div class="page, hidden">
.hidden IS hidden.
Any explanation !?
You were doing everything correct. The only explanation is that you have something else affecting it that you haven't put in your question.
Just to prove it works:
div {
height:300px;
width:300px;
position:relative;
border-radius:150px;
line-height:300px;
text-align:center;
}
div div {
height:150px;
width:150px;
border-radius:75px;
position:absolute;
top:75px;
left:75px;
line-height:150px;
}
.green {
background-color:green;
}
.red {
background-color:red;
color:white;
}
.hidden {
display:none;
}
.visible:hover .hidden {
display:block;
}
<div class="green visible">
<div class="red hidden">
hidden div
</div>
hover here
</div>
the stacking order of your css will effect the styles that are applied. Also the specificity of the tags used will effect what you see from the front end.
so as an example:
/* .hidden is ignored in this example because .page comes after the hidden tag */
.hidden {display:none;}
.page {display: block;}
/* where as this will hold as it's more specific to the page, so will take a higher priority */
body .hidden{display: none;}
/* or this as it's more specific to the exact tags above */
.page.hidden {display: none;}
Just for example:
.page{ display:block}
.hidden{
display:none!important;
}
jsFiddle: https://jsfiddle.net/r1us08a3/2/
I have a very strange behaviour of "not()" css selector.
Here my simplified code:
<div id="mapDiv" class="mapDiv mapDiv1">
pippo
<div class="gm-style">pluto</div>
</div>
<div id="mapDiv2" class="mapDiv mapDiv2">
pippo
<div class="gm-style">pluto</div>
</div>
and my css:
.mapDiv1,.mapDiv2
{
width:300px;
height:100px;
border:solid 1px red;
}
.mapDiv div
{
width:200px;
height:50px;
border:solid 1px blue;
}
:not(.mapDiv1) div
{
color:green;
}
a jsFiddle is provided here.
I would think that color:green will be applied only to second box texts, due to not() selector.... instead it is applied to both.
Can you explain me why?
As per my understandings, :not() is a negation pseudo-class.
Which means, first you select a bunch of elements and then remove elements from the selected bunch using negation pseudo-class.
Hence it should be prefixed by a selector.
If you change your css to :
div:not(.mapDiv1)
{
color:green;
}
This will select all the divs except the divs with class '.mapDiv1'
And if you change the code to:
div:not(.mapDiv1) div
{
color:green;
}
This will select all the divs within a parent div except for those parent divs with class '.mapDiv1'.
More Reference Here
you have to change your code as
div:not(.mapDiv1)
{
color:green;
}
I updated your fiddle as Fiddle
Demo
div:not(.mapDiv1) div {
color:green;
}
For more on it read
try this
div:not(.mapDiv1) {
color:green;
}
I have this simple CSS:
.cont div {
margin:10px;
border:1px solid;
}
.mark { /* This get ignored? */
margin:30px;
}
With this markup:
<div class="cont">
<div>a</div>
<div class="mark">b</div>
</div>
I except the div.mark having margin:30px; but at least in Chrome this isn't true because the generic rule .cont div seems to have a higher priority.
Consider I don't want to use !important are there any other way to solve this?
http://jsfiddle.net/xNVRm/
Just make your selector more specific by adding the tag name:
div.mark {
margin:30px;
}
Demo: http://jsfiddle.net/xNVRm/1/
You could also use .cont .mark if you want to avoid using the tag name.
In order to avoid to use the important you need to make your css selector more specific. You can use .cont div.mark. It is more specific than div.mark.
The ".cont div" declaration overrides the ".mark" declaration because it's actually more specific. CSS uses a kind of point system to figure out which rules apply. In your case, ".cont div" specifies both a class and an element inside it, whereas ".mark" only specifies a class.
For the exact rules that should be used by all conforming browsers, see this link: http://www.w3.org/TR/CSS21/cascade.html#specificity
In your case you could fix this by using ".cont .mark" in the second declaration.
Specificity is key to how CSS rules are given a pecking order. Try looking at this article from HTML Dog:
http://www.htmldog.com/guides/cssadvanced/specificity/
You could use div.mark instead, which means any div that has the class of mark, do this.
Looking over this again, I see I wasn't understanding what you were trying to do. I think I see now.
You are is saying - ANY div inside of anything with class .cont will have 10px margin. It's more specific then .mark. .mark is 30px - BUT it's a div that is inside of .cont - so it's 10px. It reads right to left - that is a good way to think about it and check specificity.
I have come to think of things with a more object oriented approach. What do you think about this approach?
HTML
<div class="container section01">
<div class="block a">a</div>
<div class="block b">b</div>
</div>
CSS
.container {
width: 100%;
float: left;
border: 1px solid red;
}
.container .block {
/* you can style these site wide */
}
.section01 .block {
border:1px solid black;
padding:10px;
margin-bottom: 1em;
}
.section01 .block:last-of-type {
margin-bottom: 0;
}
.section01 .a {
background-color: red;
}
.section01 .b {
background-color: lightblue;
}
SASS would make this much easier.
a jsFiddle of this example
a CODEPEN of this on a larger scale
I want to be able to access classes further up the dom tree from within a nested class using LESS CSS, see example:
HTML:
<html class="svg">
<body>
<div class="content">
<div class="container">
<div class="logo"></div>
</div>
</body>
</html>
LESS:
.container {
.logo {
background:url(/images/ws-logo.gif);
}
}
I want to target the .svg class on the html tag from within the .logo nested rule, to keep things tidy instead of writing another rule like this:
.svg {
.container {
.logo {
background:url(/images/logo.svg);
}
}
}
So, ideally something like this:
.container {
.logo {
background:url(/images/logo.gif);
(some-symbol).svg {
background:url(/images/svg-logo.svg);
}
}
}
I'm using modernizr to detect svg support.
Anyone know if this is possible? Or have any recommendations?
Yes! (an update)
When I tested this here, it worked!
.container {
.logo {
background:url(/images/logo.gif);
.svg & {
background:url(/images/svg-logo.svg);
}
}
}
This is not possible because you can't "step back" in the path to add another class to a parent. Instead, just write another rule:
.svg .container .logo,
/* or perhaps even simpler, however be aware of rule specificity*/
.svg .logo{
background:url(/images/logo.svg);
}
It's not much of a deal, is it?
For the sake of completeness: You can reference to the actual element via the &-symbol. THis makes sense if you want to target pseudo-classes/elements or additional classes of the current element:
.container {
.logo {
/* styles for ".container .logo" */
}
&:hover .logo{
/* styles for ".container .logo"
The hover however is bound to the .container element
equals the following selector: .container:hover .logo */
}
}
Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.
Here's a little jsfiddle example
What I'm doing is using float and 2 more block-elements inside to align it:
<div id="block">
<div id="start">1</div>
-
<div id="end">12</div>
</div>
#block {
text-align:center;
background: #000;
color: white;
width:150px;
}
#start {
float:left;
}
#end {
float:right;
}
I have many of those little objects, so my code is bloated with div's. Is there no more lightweight solution for this out there ?
I fiddled a possible answer based on the answer to this question.
http://jsfiddle.net/ScHdJ/2/
Works in all browsers, as far as I can see...
May be you can use CSS :after & :before pseudo classes like this:
HTML:
<div id="block">
hello
**</div>
CSS:**
#block {
text-align:center;
background: #000;
color: white;
width:150px;
overflow:hidden;
}
#block:before{
content:"1";
float:left;
}
#block:after{
content:"12";
float:right;
}
http://jsfiddle.net/ScHdJ/3/
But is not work in IE7 & below.