I have following markup:
<div class="breadcrumbs">
<span id="links">
home
<span>></span>
users
</span>
</div>
My styles are defined like this:
.breadcrumbs{/*styles for breadcrumbs div*/}
.breadcrumbs span a{cursor:default/*other styles for breadcrumbs links*/}
a.pointer{cursor:pointer;}
On my page, the links show default cursor (arrow) and the style a.pointer is shown striked in IE10 console and firebug.
My confusion is that as pointer class is applied directly to anchor element, should not it override the one picked from .breadcrumbs span a match?
No, of course it shouldn't. The rule of specificity says that more specific the selector, the more precedence it will have. So in your case when you created a class that applies to all the anchor tags, and then another class which applies to anchor tags within a certain other html tag (div), then the second one will have a higher precedence because it's narrower in its targeting.
You could check out this great article from Smashing magazine to understand the rules of specifity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Related
A particular web editor only allows in-line css and no javascript.
I would like to make a minimal show/hide section:
<div>
<p id="question">What do you call a fish with no eyes</p>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
Is there any solution? - I.E. compatible.
In short, no.
While it's entirely possible to achieve such a system (for multiple questions and answers) without any JavaScript whatsoever, it's not possible to do it purely inline. This is because you can't target pseudo-elements inline.
And even with you current HTML structure this would still be impossible, as there is no child selector in CSS (though a :has() pseudo-selector has been drafted).
In addition to this, it's also worth noting that inline CSS has a higher level of specificity than stylesheets; a stylesheet rule cannot override inline CSS unless you make use of an !important declaration.
Assuming you are change your HTML, this can be achieved with a combination of the :focus pseudo-selector, the adjacent sibling combinator (+) and the !important declaration, as can be seen in the following:
#question:focus + #answer {
visibility: visible !important;
}
<div>
<a id="question" href="#">What do you call a fish with no eyes</a>
<p id="answer" style="visibility:hidden">Fsssssssh</p>
</div>
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
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 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.