in the process of updating my html to html5, i noticed that the inheritance behaved a bit strange. i'm not sure why links in the ul li lists have matched css rules with blocks that have nothing to do with it.
eg in screenshot 1 (aside), it takes over styles from the footer (but out of the screenshot also from role=navigation)
in screenshot 2 (footer), it takes of styles from the aside (and also from the screenshot also from role=navigation)
why does it do so?
In you first screenshot the css that gets applied is used on #footer #footerGrid ul li a, a:link,a:visited. By seperating this with comas you are having 3 different css selectors:
#footer #footerGrid ul li a
a:link
a:visited
So this gets applied to the footer section, but also triggers on a:link and a:visited. And the same goes to your 2nd screenshot vice versa !
documentation for that:
http://msdn.microsoft.com/en-us/library/aa358833%28v=vs.85%29.aspx
Note When grouping selectors, remember that the comma starts an
entirely new selector from the beginning.
Related
When I look at WordPress coding as well as other sites. I mainly see a while lot of scripts and css styles that it drives me bonkers. Here is evidence of what I am getting at:
Ul.nav setup
ul {
/* some css */
}
ul.nav {
/* some css */
}
/* and the rest goes on about ul nav and hover events */
Vs simple css (in my honest opinion)
.nav {
/* some css */
}
.nav:hover {
/* some css */
}
What will the difference be in these methods and are they the correct format of css writing? And if it is possible. Why isn't every code simple and concise to load faster etc? How it's done on both versions are correct to make a link work. (To be assumed)
Thank you all for taking your time to help!
In the first example you can add style to everything in the ul tags, and everything in the ul tags with a class of nav. In the second example you are adding style to anything with the class nav, and anything with the class nav when someone hovers their mouse over the nav. If that makes sense :-)
I think that what you chose as evidence probably is somebody specifically naming their elements .nav
For me, it's better to have more specific classnames, but not too long. But then we're going into the hardest job in IT "naming things".
Giving your ul or nav the classname .nav is a bit redundant. So i disagree with your assessment there that it's simpler. If you have a vertical nav and a horizontal nav, then .nav would be more complicated to style.
It really depends on the project, the scope and the readability.
CSS validators frown at the first example (overqualified elements) , but for the records
ul.nav will inherit everything from the class of .nav.
Ok, this might look like another stupid question, but I cant find answer.
See this fiddle:
Remove #Navigation in CSS declaration here:
#Navigation .stretch {
...
}
so it becomes:
.stretch {
...
}
Why browser (chrome Version 26.0.1410.64 m) ignore this rule?
I have tested also on firefox.
Probably it is not CSS priorities issue, because DevTools neither FireBug doesn't show it entirely. Not even overlined.
Thanks
EDIT: Many thanks guys! I couldn't see those crossed rules before, I was scrolling trough several times, in devTools and in fireBug and solving such a misserable "simple" problem for more than hour.
the rule defined only with .stretch selector is less specific than #navigator li, and it's not applied even if defined later on cascade. Thus display will be ever inline
It isn't ignored, it is overruled by #Navigation li because that selector is more specific. It sets display to inline (instead of your intended inline block).
You can easily spot this when you 'inspect element' in Chrome. It shows the styles of the element, and crosses out the overruled styles.
The issue is the #Navigation li has higher specificity than .stretch since it contains an id selector.
The reason you do not see it is because it is empty and you most likely select the previous element (on jsfiddle code).
If you select the empty li from firebug it shows it is overriden.
There are already many questions related to this. But I'm still not clear. Also not sure if the title of the question is correct. Here's my problem:
What the below CSS code means?
#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }
As per my understanding, please correct me if I am wrong:
Line 1: every li element within any element with id="nav" will have styling cssA
Line 2: When I put my cursor over every li element within any element with id="nav" will have styling cssB
Line 3: every a element within every li element within any element with id="nav" will have styling cssC
Line 4: When I hover every a element within every li element within any element with id="nav" will have styling cssD
Line 5: Every span element within every a element within every ul element within every li element within any element with id="nav" will have styling cssE. Also anyother ul or a element will not have this style untill unless the parent element has id="nav"
You are correct on all except .over, The "." represents a class. and "#" represents ID. But yeah, you've got the concept down.
Also, if you want to "Override" as the title says, you'll add
!important
to the end of any rules you want to take precedence over the others.
you can override the css by giving !important or you can give inline style.
priority of inline css is high then external css
All of the existing answers are correct, but there is a bit more to it than has been given already.
As has already been said, "li.over" is a combined selector - it will selector li elements that also have a class of "over". If you wanted to use different CSS properties or property values whilst the mouse is over (hovering over) the element then you use the pseudo class selector "li:hover". These are called pseudo class as you aren't selecting something that is part of the document, but based on the state of an element. There are also pseudo elements which again aren't in the document directly, but logical extensions of the document structure - for example first-child, first-of-type, fifth-of-type, odd items etc.
"#nav li ul a span" is a descendant selector, as you say it will select elements that are children (at any level) of each parent, so "#nav li" selects "li" elements contained within an item with ID "nav" - even several levels down.
If you want to select items that are direct children of the parent then you can use the ">" symbol. I.e. "#nav > li" will select li elements that are directly below any item with an ID of "nav", but not any li elements that are children of that element, or indeed elements below that.
Incidentally "#nav" is exactly equivalent to "*#nav" as it selects any element with the ID, you could also write "ul#nav" if you only wanted to select ul elements with the ID. This could in turn be combined with a class "ul#nav.bar" or even multiple classes "ul#nav.bar.touch".
Removing the space between the selectors like this combines them, so in the last case instead of looking for an item with class "touch" inside an item with class "bar" inside an item with ID "nav" inside a "ul" element, you are selecting a "ul" element with an ID of "nav" and both the classes "bar" and touch". An element like this-
<ul class="bar touch" id="nav">...</ul>
It is also possible to use attribute selectors, so if you wanted to select links which will open in a new window you could use "a[target=_blank]" - which selects based both on the presence of the attribute and the value - or if you wanted to select links with any href value you could use "a[href]". This simply selects all elements with this attribute.
On top of that you can even select items which are adjacent (next to) another element, if you wanted to select all paragraphs directly following an image then you would use "img + p" in your selector, or "p + img" if you wanted to select images directly following a paragraph. As always the last item in the selector is the one the styles are applied to.
It is generally considered good practice not to be overly specific with CSS selectors, as it makes your code much less re-usable. Unless you need to write "div.widget" just write ".widget" as the otherwise you'd not be able to create a "widget" using other elements, and it makes it much harder to override these properties later on in those cases you might need to.
To wrap up selectors, there's a good introduction to CSS selectors on MDN and Code School (paid course provider) also have a excellent online foundation course on CSS available for a very reasonable price which will go through selectors in some detail.
With regard to overriding classes, there are two further concepts you should understand - cascade order and specificity.
Given a HTML snippet of-
<div class="widget">
<p>
Some text you want to style
</p>
</div>
And the following CSS-
#widget p { color: yellow; }
p { color: blue; }
The color of the text would be yellow and not blue because the specificity of the first selector is greater (more specific) than the second. To understand this I suggest you have a play with a Specificity calculator and have a read of the Smashing Magazine tutorial on the subject.
In short though, inline styles trump all, and the more specific a selector the more likely it is to be applied in place of other selectors that would otherwise apply different property values. The value in the selector with the highest specificity score "wins", but other property values from selectors with lower specificity that do not clash will also still be applied to the element.
For example, altering our earlier CSS-
#widget p { color: yellow; }
p {
color: blue;
font-weight: bold;
}
The text will still be yellow, but will also be bold as there is no font-weight property given in the selector with higher specificity.
The last concept you should understand is what happens when two or more rules have identical specificity.
#widget p { color: yellow; }
#widget p {
color: blue;
font-weight: bold;
}
In this case our text is now blue as the second rule appears later in the stylesheet and thus overrides the first. If you have multiple stylesheets then the rules from the last stylesheet to appear in the document head will override rules with identical specificity.
In almost all cases you should use a more specific or the order of the selectors within the stylesheet in order to apply the right styles to the right element, and absolutely should not be routinely using the !important flag to achieve this unless absolutely necessary. See http://james.padolsey.com/usability/dont-use-important/ for a fuller explanation than I give here, but it rapidly becomes unmaintainable (what do you do when everything is "important") and it is also not accessible for users who may wish to override your styles in their user agent stylesheet (local to their browser) in order to help them read or use the page (increasing font size, contrast with background colour etc.)
I have li already styled in a stylesheet. I need it to stay a specific style. It is styled without using a class, so for example
.selectors{width:50px;}
li{
padding:10px;
}
Now i have run into a problem. I am trying to style the li again, without any classes like what i have in the example code. For example
.options {width:30px;}
li{
padding:50px;
}
What i was wondering is, is there any way to attach certain elemnts to another element. I'm not sure if this is making any sense, but I am trying to have one LI only be applied to a certain part of the page, and the second be applied to another part of the page. Is this possible without using classes? I can't modify the code or add classes otherwise the script doesn't work. Can someone help if I am making any sense at all.
A very common way to do this is
#content li { ... }
#sidebar li { ... }
so the li will behave differently inside two different elements with different IDs. Say, if content is a div, and sidebar is a div, then the li will behave differently inside these two divs.
It is also possible to be "within a class":
.items-to-watch-out-for li { ... }
This is a good way to avoid "too many classes", which is called "classitis", like in this article:
http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html
It's never going to be the nicest way if you can't add classes.
Potentially if the uls are in the same container you could try:
ul:first-child li {}
This will allow you to style the first ul however you want then the generic:
ul li {}
Will take care of the second.
This method should work in all browsers apart from IE6.
http://www.quirksmode.org/css/contents.html#t17
動靜能量 solution is the ideal way.
I would like to build a tree like navigation interface in pure markup (that is, without needing javascript/jquery etc.).
Unordered lists <ul> seem like the best solution, and I have found this tutorial on simplebits.com is very close to the solution I need. However, the author defines the stylesheet with the assumption that the final/max depth of any branch is already known:
#sitemap li ul li ul li {
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
I want to know if there is way to allow the markup to descend "infinitely" and have the styling support this seamlessly.
If you need more clarification on this, please just let me know.
There are tutorials on this but there are two problems:
IE6 doesn't support :hover on tags other than anchors so you need a Javascript solution for that browser; and
It's actually really complicated to get it working consistently across the major browsers.
Consider the alternative using jQuery and the superfish (inspired by suckefish) plug-in:
<ul class="menu">
<li>...
</ul>
<script type="text/javascript">
$(function() {
$("ul.menu").superfish();
});
</script>
Done.
If you do go the (semi-)pure CSS route, I highly recommend you use one of the existing frameworks for this (like suckerfish or a derivative). Otherwise you'll just be pulling your hair out and spending a lot of time to get it to work right.
To answer your question about depth: that rule you mentioned essentially is going to infinite depth. Remember a space in CSS is a descendant selector not a child selector. The reason for the repeated groups is so that the rule only applies from (say) the third level down.
That's because the first and second levels will have special stylings. The first will be a horitzontal or vertical bar. The second will popout from that but from the third level down it will consistently popout in the same way.
the markup you supplied should work for any further elements without having to specify them directly.
for example:
#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)
so the last rule would automatically be applied to levels 4, 5, 6 and beyond.
unless you want specific styling for ALL levels, then you should be fine.
How about assigning a class to the unordered list elements?
#sitemap li.tree
{
padding-left: 16px;
}
I don't see why this would not work but correct me if I'm wrong.