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;
}
Related
I have an element with id. I try to choose some of its children via CSS selectors. #myDiv span, #myDiv i works but I wonder if there is a shorter way for this.
I've tried nested selectors like
#myDiv {
& span, i {
color: red
}
}
but didn't work.
#myDiv span, #myDiv i {
color: red
}
<div id="myDiv">
<span>My Span</span>
<p>My P</p>
<i>My I</i>
</div>
Your nested code is in SCSS not in CSS, and there is no nesting in CSS.
The shortest CSS code if you will not add any another elements under this container in future will be
#myDiv *:not(p) {
color: red
}
If you want it to be recursive (let's say, in the future, some #myDiv elements will have their own child elements), use:
#myDiv > *:not(p) {
color: red
}
You can like this:
#myDiv {
& span, & i {
color: red
}
}
it seems that you forgot to put "&" before every new class selector.
Is this possible, with CSS ?
Apply this rule if .div1 doesn't exist:
.div2{
property: value;
}
like
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
Exists, or doesn't exist? Your question confuses me :)
Apply style to .div2 if .div1 exists:
Option 1: .div2 follows directly after .div1
.div1 + .div2 {
property: value;
}
Option 2: .div2 follows .div1 as a sibling:
.div1 ~ .div2 {
property: value;
}
Style .div2 without .div1:
It's a bit of a hack, but you could do the reverse.
Style .div2 normally, and then override the styling with the selectors above.
If .div1 doesn't exist, .div2 gets the normal styling.
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle. Try removing div1 to see div2 as it would be styled without div1
Generally speaking, no, you can't do that.
But you may 'hack' it using CSS selectors, I'm referring to to:
+ .something selector
~ .something selector
I'd use the second selector, which is the "general sibling" selector.
Given the HTML you posted you can apply the style to the .div2 class and then reset it using the .div1 ~ .div2 selector.
So something like this:
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2 will be black and with the second snippet it will be blue.
NO
With CSS alone, the if conditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
I have a class like this
.mydiv a {
color: #014BA4;
}
How can I use this class for the span element ? (Without adding/modifying the CSS file - I have no right to do)
<div class="mydiv">
This text is #014BA4
<span>How can I use the above class</span>
</div>
A terrible solution, but desperate times call for desperate measures; If you wrap your span in an anchor tag with the href attribute set to # and then stop the default behaviour...
<div class="mydiv">
This text is #014BA4
<span>How can I use the above class</span>
</div>
You would never normally do this but if it has to be done and you absolutely can't edit your css file then it's the only way I can think of.
Try this
.mySpan,.mydiv a {
color:#014BA4;
}
<div class="mydiv">
This text is #014BA4
<span class="mySpan">How can I use the above class</span>
</div>
Update your CSS as mentioned below :
.mydiv a,.mydiv span {
color:#014BA4;
}
This will add the styles to all spans
.mydiv a, span {
color:#014BA4;
}
to add this to a particular span
.mydiv a,.mydiv span {
color:#014BA4;
}
and apply the class to the span
asdf
Try this
.mydiv a,.mydiv {
color:#014BA4;
}
just .mydiv span would do the trick
.mydiv span{
color:#014BA4;
}
Try to this
.mydiv span, .mydiv a{
color:#014BA4;
}
if you used to all element inner .mydiv than used to this css
.mydiv{
color:#014BA4;
}
This will make Each Next <span> after <a> with the same stile:
.mydiv a,
.mydiv a + span {
color: #014BA4;
}
Example: http://jsfiddle.net/verber/F8CZF/13/
JS Fiddle
Without altering the html is there any way to target the last .red class using CSS?
<div class="row">
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Target Me With CSS???</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
</div>
here's what I've tried :
.row > div{
display:inline-block;
padding:10px;
}
.row .red{
background-color:#770000;
color:#fff;
}
.row .red:first-child{
background-color:#440000;
color:#fff;
}
/*have tried :last-of-type too*/
.row .red:last-child{
background-color:#FF0000;
}
.row div:last-child{
background-color:#0000BB;
}
I don't believe there is a way to do that without using JS.
The closest you can get is to target the 3rd item with:
.row div:nth-child(3) {
background: chucknorris;
}
You can include a qualifier to only target the third child if it is .red like so:
.red:nth-child(3) {
background: chucknorris;
}
http://jsfiddle.net/s76J3/3/
Unfortunately, you can't do this with CSS alone. Here are a few other SO questions that are related to yours:
Using :last-child with class selector
CSS last-child selector: select last-element of specific class, not last child inside of parent?
However, if your last .red sometimes is in different positions, and you can't change the HTML at all, then you will have to rely on some light JS/jQuery.
$(function() {
$('.row .red').last().addClass('last-red-class');
});
You can use it to add another class to the last .red, and just reference that in your CSS.
http://jsfiddle.net/s76J3/2/
HTH
:last-of-type description
The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.
and syntax
element:last-of-type { style properties }
So, what really going in your example is that the browser selected the right div element but it was not the last div element of its parent; therefore, nothing was applied. To test this, change all your .red class div into a span and do the following
.row span:last-of-type{
background-color:#FF0000;
}
then you will get a working code.
http://jsfiddle.net/s76J3/4/
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>