I'm trying to change the hover of my spans. For some reason I need to use the same id's for all of <li> tags that contain my spans, so what happens basically is all the spans I created has the same parent id:
<li id="li_id">
<span>Link title</span>
</li>
<li id="li_id">
<span class="anotherlink">Another Link title</span>
</li>
I've checked on how to override id's using classes, similar to this one:
Can I override a #id ul li behaviour with a class definition , but I can't seem to make them work.
CSS:
#primary_nav #home li#li_id>span:hover {
background-image: url(this_image.png);
}
//This is for my first link
#primary_nav #home li#li_id .anotherlink >span:hover {
background-image:url(another_image.png);
}
//This is for the other link.
Is my syntax correct? It' does not seem to be working right now and I don't know if the CSS for the other link is actually correct.
NOTE:
I know it seems a bit wierd doing this, as the process should be the other way around( 1 class, different id's) but what I'm basically doing is for an existing site, and I willing to do some unorthodox fixes like this, because we're going to replace the entire site with a new one, so I just need to make sure this site gets updated until the replacement site arrives.
Using two CSS IDs is incorrect. They are supposed to be unique. Use classes if you want to use styling multiple times. Always remember this, Classes are for multiple usage, IDs are for single, unique usage.
Since doing the right thing is always hard, I've decided to change the id's of all the spans, and just made quick changes using CSS and added all of the new id's to a single id selector.
#primary_nav #home li#li_id-1 , #primary_nav #home li #li_id-2 {...}
Everything seems to be ok now, but I also realized that what I did was inefficient since I could have grouped it in a single class instead of placing all of the id's in a single selector.
Related
I am trying to organize and structure our applications better with LESS and I'd like to know the best route in doing a task using "!important". Currently we have a lot of these and I'd like to get rid of them if it makes sense. My example is:
<div id="test">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<button id="button">
Select
</button>
$('#button').on('click', function(){
$('#test li').toggleClass('blue');
})
Option 1:
#test {
ul{
li{
color: red;
}
.blue{
color: blue;
}
}
}
So with LESS, if I have the class after the initial color, it should over take. If I want to add the blue class, then I would insert it into each area within the LESS file, or do:
Option 2:
#test {
ul{
li{
color: red;
}
}
}
.blue{
color: blue !important;
}
In this case I would have it listed once, and then whenever it is called it will override the class. Or have an Option 3 if someone thinks there is something better than these two. I'm not sure what the best route is, but I'd like to get rid of !important if possible.
I subscribe to the view that you should only use !important as a temporary fix while you refactor your styles. Clearly you have a specificity problem to address (which your example doesn't quite demonstrate). In your example, I would first do Option #2 (if it was hard enough to figure), then refactor overrides like .blue into a style which is loaded last.
https://jsbin.com/cekobodixe/edit?html,css,js,output
If we change it slightly we reach a common problem: the use of id doesn't allow cascading precedence by load order:
https://jsbin.com/xikolenevo/1/edit?html,css,js,output
and so that suggests a second factor to the fix, replacing ids with classes.
Another thing that might happen is that a set of rules for a specific component were added to an override stylesheet instead of to the component. So now, the rules are overriding otehr components as well. The solution here is to relocate the offending styles to their respective components. This can get ugly fast, so its best to do this early.
The only thing I could think of is making two different classes, one red and one blue. Set the li objects in your html to .red and changing the class on click. But I don't think that's a very pretty solution.
Otherwise I think you have to stick to your !important.
I have a menu item that I need to hide. It is not logical to go through all the files and remove it so I was looking for a way to hide it with CSS. Here is the code I have:
<li>
<a tabindex="-1" href="index.php?option=com_eshop&view=countries">
<span class="icon-flag"></span>
Countries
</a>
</li>
I found a few possible solutions but nothing seems to work. Here is the one that should work but I must be doing something wrong:
a[href="index.php?option=com_eshop&view=countries"]{ display:none; }
That attribute selector should work given the HTML you provided. See this example.
There are several reasons why it may not be working. Here are two possibilities:
The selector is being overwritten by another selector with a higher specificity. If this is the case, you could increase the specificity of your selector by adding the parent element selectors to the selector. Since it's a dropdown menu, it's likely there is a more specific selector setting something like display: block.
It's also possible that's not the href value on your site. If this is the case, you could try using the attribute selector [attr*=value]. This will select all elements that contain instances of that value string.
a[href*="index.php?option=com_eshop&view=countries"] {
display:none;
}
Use the nth-child(item number) css property and hide it because you also want to hide the li because if you only hide link then there may be whitespace due to li
I am building websites for a while, and I have a question about CSS I can't really rid over. So there is that frequent situation when multiple classes affect a DOM element, and both classes declare the same properties. For example:
.first {
color:white;
}
.second {
color:black;
}
I know that if I have an element with class="first second" in that the text will be black. If I rather want it to be white, I have several options:
Using !important: I know this one is handy and I use it, but sometimes, if I use it too often, my CSS may become messy. I mean, multiple !important's can result the same basic situation.
Reordering the classes inline: if I am correct, which class comes first, it will be the priority one. This is nice, but i often work with environments where I can't affect that. Secondly, this is not a global but a local solution.
Reorder the CSS itself: well, this sounds interesting, but if I work with many stylesheets (and I do), it is hard to track, especially when it is WIP.
Actually what I am looking for is some workaround like z-index but for priorizing which class is stronger. Because I can't really find anything useful in this topic, I am just curious maybe it is a user error, and you guys know something I don't. How do you manage this? What do you suggest?
class="first second" is the same as class="second first". The priority is based on the position of the declarations in your css and not in their position on the html element.
So, if you want priority of a class against another, put the top priority class LAST on the css file.
.first {
color:white;
}
.second {
color:black;
}
in this example, class second has always priority over class first. This happens because browser scans through the css top-to-bottom and always applying the rules of matched classes that finds. So, the last matched class has priority over the previous matched classes.
see this fiddle: http://jsfiddle.net/5c29dzrr/
At the same specificity level, the CSS selector that is furthest down the stylesheet will be applied. So in your example, if you wanted in that situation to have the element with the white colour you would have to order your properties like so:
.second {
color: black;
}
.first {
color: white;
}
The order of the classes in the HTML tag is not important; it is the order in which they appear in your CSS.
The better way to handle this is to go with some better naming convention such as BEM or SMACSS so that you don't have the issue of conflicting class names.
Edit: It might be worth reading up on specificity and the cascade for a better understanding of this. I found this calculator to be pretty handy in determining which rules will take precendence, although these days you can just use the developer tools to find out that information.
I am using the Drupal ShareThis module. Unfortunately, a recent security release of this module has added a span in the generated code and it disrupts the layout of my page major. Everything was working fine before.
There is no option to control the generation of this code:
<span class="chicklets twitter"> </span>
Is it possible to remove/not display this span code via CSS? If yes how?
I tried:
.chicklets twitter {
display:none;
}
but no success. I am not a CSS expert. Thanks.
UPDATE
Here is a screen shot from FireBug:
I have been trying the suggested solutions:
span.chicklets {
display:none;
}
The above completely removes all ShareThis buttons (which can be explained by the following issue):
span.chicklets.twitter {
display:none;
}
The above removes the button, but the corresponding span still appears in FireBug as shadowed (see next).
Of course, I need to keep my button. What could cause this?
P.S.: Nevermind, I'll discuss this extra issue in another question if necessary.
If you want to set the style of an element with two classes specifically, combine them with no spaces. The dot notation means "class", so you would put a dot before each of them and concatenate them:
span.chicklets.twitter {
display: none;
}
As #AndrewBrock suggested, you can also just use one of the classes, as long as you know that the single class won't affect other span elements in an undesirable manner.
If you need the span to maintain the button, but don't want the span to take up space, then change it to this:
span.chicklets.twitter {
width: 0px;
}
chicklets and twitter are 2 separate classes. You only need to set the display:none in one of these.
span.chicklets {
display:none;
}
I have restricted this to only span elements with the class chicklets.
Note that this could affect other span elements which also have the chicklets class
If you have jQuery running this will do it (remove it versus hide it):
$(".chicklets.twitter").remove();
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.