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
Related
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
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.
Normally CSS is my thing, but I'm somehow dumbfounded why this isn't working for me. I'm building a site through Cargo for CMS purposes and you can see it here: http://cargocollective.com/mikeballard
In my menu, I have five main categories, and clicking on them (images, for example) reveals the list of work under that category.
<div id="menu_2444167" class="link_link">
<a id="p2444167" name="mikeballard" target="" href="http://cargocollective.com/mikeballard/filter/images">Images</a>
</div>
<div id="menu_2444188" class="project_link">
<a name="mikeballard" rel="history" href="mikeballard/#2444188/Ultra-Nomadic-Def-Smith-Cycle-2011">Ultra Nomadic Def Smith Cycle, 2011</a>
</div>
<!-- more divs here -->
<div id="menu_2444201" class="project_link">
<a name="mikeballard" rel="history" href="mikeballard/#2444201/Archive">Archive</a>
</div>
Basically, I'm trying to select the last div in this set, and add a margin-bottom:15px to that div. I've tried using:
.project_link:last-child or .project_link:last-of-type but it doesn't seem to be working.
The HTML, which can't be altered too much to rely on Cargo, isn't great as if they had used list items, instead of divs with anchor tags I'm assuming this would be a lot easier.
The :last-of-type and :last-child selectors are not supported before IE9.
Class names, etc are not looked at when it comes to the :last-child and :last-of-type selectors. The .project_link:last-child selector will only trigger if the specific element is the last child in the parent element and has the class "project_link", and the .project_link:last-of-type selector will only trigger if the specific element is the last element of that type and has the class "project_link".
Both should trigger in a supporting browser, since it is implied as *.project_link:last-of-type and will check for every type of element inside that parent (which appears to only be divisions anyways). The last division shown here has the class "project_link" which would match this rule. The only reason these wouldn't trigger is if you had extra elements (or divisions) below what you're showing us, or you're using a browser which doesn't support it.
I'm trying to have some css applied for the first div with id=div1. When I do .alldivs:first, it doesn't work. What am I doing wrong?
<div class="alldivs">
<div class="onediv" id="div1">
</div>
<div class="onediv" id="div2">
</div>
<div class="onediv" id="div3">
</div>
</div>
If you want to select the first child: .alldivs>:first-child should do the trick.
Edit:
Su edited my post to say .alldivs:first-child. This actually isn't right and I've restored it to what I originally put. The :first-child syntax selects the first child of its parent that matches the selector immediately previous to the colon. Therefore, p:first-child would match any paragraph that was the first child of its parent. Thus, .alldivs> matches any child of .alldivs and :first-child matches the first one. Please make sure you're correct before editing others posts.
What you want is:
.alldivs div:first-child
If the div has an id already, just select it by id.
#div1 {
/* yes that's all you need */
}
There's no such thing as two elements with the same id (if you're paying attention to the rules), so it doesn't matter if it's first or thirty-first.
If you're looking for the first div no matter what the id, use .alldivs :first-child
Here's some reference for further understanding:
http://www.w3.org/TR/CSS2/selector.html#first-child
.alldivs is not a selector, if you wanted to select the first div in the dom it would be div:first-child or if you wanted to select the first div with the class onediv it would be .onediv:first-child
I hope this helps you
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.