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.
Related
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
I'm working in WordPress and I have one part of the site colored and styled like normally but there is a secondary part of the site that is colored in darker styles. I have been able to separate the two's CSS mostly with the use of classes and !important. I am having a spot of trouble in the menu area.
In the majority of the site I have the following when hovering over the menu:
.header-menu li:hover, a:hover {
background-color: #b89230 !important;
color:#fff4d6;
text-decoration: none !important;
And on what part of the site I have:
.page-template-cryptofact-page-php .header-menu li:hover, a:hover {
background-color: #836F38;
}
As it is written above, the .page-template css is taking on the background color hover of the rest of the site. If I !important the css of the page-template, then the rest of the site takes the coloring effect instead, regardless of its own !important style.
I've tried removing !important postscript from both, swapping either one, and adding it to both and I still cannot get them to act on their own. I was hoping that designating .page-template-cryptofact-page-php would be enough, since it seems enough for all the rest of the styling.
When I open to inspect the element in source, all of either .header-menu or .page-template-etc is grayed out leaving the a:hover as the instigator on either problem.
I'm fairly new to the nuances of CSS, so if someone could explain why this is happening I would greatly appreciate it.
I would post the site but it is insecure so it would not be a good idea. I can post screenshots or any other information you need.
Here I have placed a couple images:
I'm making a bit of an assumption here as to what your problem is, because I'm not 100% sure what you've got going on, but I believe you are mis-using the , in your selectors.
The comma breaks up totally distinct selectors, so if you want to style certain elements under a certain class, you would need to include that class on both sides of the comma, so you should end up with something like this:
.header-menu li:hover, .header-menu a:hover {
background-color: #b89230;
color:#fff4d6;
text-decoration: none;
}
.page-template-cryptofact-page-php .header-menu li:hover,
.page-template-cryptofact-page-php .header-menu a:hover {
background-color: #836F38;
}
Removing the !importants is probably a good idea... they usually make things more difficult to maintain.
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.
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.