I have two carousels on a page and need to style them differently. So I have this css combinator to style a child bootstrap element inside an id element...
#menuCarousel .carousel { ...
Which doesn't work as I expected. However, if I close the space like this...
#menuCarousel.carousel { ...
the styles are applied. According to W3Schools, there is meant to be a space so I'm thinking I'm doing something else wrong.
What's happening here y'all?
Thanks.
Just in case the html is important:
<div id="menuCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
First off in this case the .carousel shouldn't be necessary at all, because IDs must be unique and that alone would be sufficient to select the div.
But to get down to your question, a space between CSS selectors will select a descandant element. Removing the space means to select the element with that class.
So #menuCarousel .carousel { ... says select all elements with the class carousel that are descendants of the element with the ID #menuCarousel.
#menuCarousel.carousel { ... means select the element that has the ID menuCarousel AND the class carousel.
(And on a side note, don't use w3schools to learn CSS. Use https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors)
The id= (#) and class= (.) are applying to the same element, so I would think they would have to be combined as #menuCarousel.carousel. Otherwise it would be looking for a .carousel under a #menuCarousel, wouldn't it?
So a space indicates a nested element like this
<div id="parent" class="parent">
<div class="child"></div>
</div>
#parent .child{background-color:blue;}
The above example would make the child element blue.
However two selectors without a space is used to select an element using two different selectors on the same element. So
#parent.parent{background-color:blue;}
Would make the parent element blue in the same way as just #parent
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I want to select the first child of a parent div, but I have some constraints: the div I want to select has a very general class name, and I don't have access to the markup to give it another class. Since it has such a general class name, if I use first-child, my changes will apply to unrelated elements on the page. It also has a sibling with the same type and class name:
<div class="parent-div">
<div class="extremely-general-class">I want to change this one</div>
<div class="extremely-general-class">And not change this one</div>
</div>
Is there a way to select only the first child of a parent div, but without using first-child? If I use
parent-div > general-class
then it will apply to both sibling divs.
Answer would be nesting, like:
grand-grand-parent-div > grandparent-div > parent-div > general-class:first-child
and so on, as long as the structure does not repeat.
Another idea which came to my mind was using :not() selector, but that's the case only if other divs u don't want to style have something in common that to-be-styled doesn't.
You can select the first child using
general-class:nth-child(1)
that is, as you asked, not using first-child
Given the following markup
<div class="fixed">
<div class="clmn2">
</div>
<div class="clmn2">
</div>
</div>
And the information given on mdn
By my interpretation this selector should work.
*:not(.fixed) [class*="clmn"]
Unfortunately it does not, however this does.
div:not(.fixed) [class*="clmn"]
Any ideas why?
*Update *
If you check the linked fiddle the column in rows not marked with the class fixed should be floated.
*:not(.fixed) foo matches
A foo element that is a descendant of any element that is not a member of the fixed class
This is different to:
A foo element that is not a descendant of any element that is a member of the fixed class
If we had:
<a class="fixed">
<b>
<foo></foo>
</b>
</a>
Then the foo element is a descendant of a b element that is not a member of the fixed class. (It is also a descendant of an a element that is a member of that class, but that doesn't matter because *:not(.fixed) will happily match the b element instead.)
Your "bad" selector matches any element with a class as given that is a descendant of any element without class fixed.
Since both the <html> and <body> elements do not have the class fixed and your inner <div>s are their descendants, the selector matches them.
The "good" selector only considers descendants of any <div> that does not have the class fixed. Since the only <div> in your HTML that has descendants also has that class, the selector matches nothing.
In general, plain :not(whatever) followed by a descendant combinator is not really useful. In your case it looks like the solution would be to replace the "descendant" combinator with the child combinator >:
:not(.fixed) > [class*="clmn"]
Your selector is too general. Since * will also select things like body. And body is not(.fixed), the rule will still be applied.
Change it to something more specific like .row:not(.fixed).
http://jsfiddle.net/sVpTA/2/
CSS
.row:not(.fixed) [class*="clmn"]{
float: none;
width: 100%;
margin-left: 0!important;
}
Actually, it's working better than you want it to.
*:not(.fixed) matches, among other things, your body element. Eventually, somewhere within the body, it finds your clm* divs, and applies the styles.
If you only want to match things that are direct descendants of something non-fixed, use:
*:not(.fixed) > [class*="clmn"] { /* ... */ }
Which does work.
I am trying to match all elements with a class of span1, span2, span3, span4 and so on.
I am using the following code, but it does not match the last child of these classes:
[class*="span"]:last-child{
margin-left:0;
}
For example if I have:
<div>
<div class="span3"></div>
<div class="span9"></div>
<div class="clearfix"></div>
</div>
The rule does not apply to the .span9 element.
last-child works on whatever the last child of the parent is. In your example, it's looking at the last div and seeing that its class is clearfix - not something with span in it - and failing to match.
If you're always clearfixing at the end and you only want to target the second-to-last child, then you could use.
nth-last-child(2)
which would, as its name suggests, target the 2nd-to-last element, regardless of what it is. View on JSFiddle.
If you're always working with divs, you could also use this code to get the same effect:
nth-last-of-type(2)
View that one on JSFiddle.
The IE support for all of these patterns (last-child, nth-last-child, and nth-last-of-type) is the same, IE9 or later.
Though, of course, you can simply get rid of the :last-child bit to target all of your span class divs, regardless of where they are within the parent:
[class*="span"]
View on JSFiddle
I actually know how the browsers tend to render the following examples (results based on Opera 9.5 and Firefox 3.0), but I don't understand the reason behind them.
Take this example,
<style type="text/css">
#outer{color:red;}
.inner{color:blue;}
</style>
<div id="outer" class="outer">
<div id="inner" class="inner">
<span>testing</span>
</div>
</div>
The result is blue text.
However, now see this example,
<style type="text/css">
#outer span{color:red;}
.inner span{color:blue;}
</style>
<div id="outer" class="outer">
<div id="inner" class="inner">
<span>testing</span>
</div>
</div>
The text is now red.
Finally, try this,
<style type="text/css">
#outer span{color:red;}
#inner span{color:blue;}
</style>
<div id="outer" class="outer">
<div id="inner" class="inner">
<span>testing</span>
</div>
</div>
Once again we have blue text.
Is there a specific reason for this methodology?
(sorry about the unclear title, it's the best I could manage.)
In example 1 the span element is not directly targeted, so we must look into how CSS Inheritance is handled. Color is an inherited property so we need to look at the span's closest parent element to determine color. In your example 1 case, the class (.inner) has color blue defined and passes that inheritance down to the span.
In example 2 the span element is directly targeted by both rules, so we must look into the CSS Cascade to determine which of the rules that targets the element is most specific. The rule with the ID selector wins.
In example 3 we invoke the CSS Cascade rules once again and since both specificities are equal, last rule wins.
Note that in this situation:
#outer {color: red; }
span {color: blue; }
The text will be blue. This is because the second rule targets the element directly and therefore does not invoke the CSS Cascade.
More Reading:
CSS Specificity Wars
Understanding Specificity
CSS for Poker Players
Note and Disclosure: I authored the third blog post.
The W3C has a detailed explanation of exactly how CSS is supposed to cascade and take precedence. For your exact situation, this is what is occurring:
While "color" is an inherited property, the inner selector targets the span itself, so it takes precedence.
Since they both now target the span, the one that is more specific (the id selector) now takes precedence.
They are now both equally specific, and thus the declaration that appears later takes precedence.
I hope this explanation helps:
EX 1) Because these are general rules, it applies the color of the immediate parent .inner
EX 2) An ID is more specific than a class (since there is only one element with a given ID) therefore the id selector is considered more specific and important
EX 3) Because the 2 rules are equally specific it chooses the last rule
Darko
In the first example the first style applies to the outer div. The inner div then inherits this style, but the second style applies to the inner div so it overrides the inherited style.
In the second example both styles apply to the span. The first style takes precedence because an id is more specific than a class.
In the third example both styles also apply to the span. As they have the same specificity, the last style takes precedence just because it's last.
You can read more about how precedence is determined here.
The cascade (the the 'C' in CSS) is well defined to allow a clear definition of what rules will take precedence (including allowing for important, user and agent rules).
But the rules are also not simple (thing of complex matches with large hierarchies specified).
The last step of the cascade is document order of the declaration, with last winning.