This is really bugging me. Due to the CMS, I have a list with li's like this:
<li class="leaf first active-trail">
specialTest
</li>
I'm trying to style the menu item, the "li", NOT the "a"... the existing applied css adds padding/coloring etc to the li element, not the a psuedo tag so I need to affect the li for a current state.
So, I need to select: "Whatever is the current li with the class of active-trail but only if it has a child link with the id of 'specialIDTest'.
The reason being that depending what area a user is on, the specific 'specialIDTest' will be color coordinated so I cannot apply a general style declaration to 'active-trail' as that would make all the sections (menu items) the same color when the active area.
So I'm not seeing a 'right to left' selection process here. As I cannot add a class or id to the actual 'li' element, I'm somewhat stuck.
I may be making this harder than need be. I have to support IE7 and above and would rather do this will CSS instead of adding more JQuery, but will do so if necessary.
This has actually been asked before, but currently CSS offers no way to read from right to left. You will need to use JQuery/JS to target the li parent of the a tag.
http://jsfiddle.net/disinfor/E5fHw/
Related
I'm customizing only CSS on an underlying platform (so I cannot edit HTML). I need to hide one item in a list that looks like this:
<li><span class="icon icon-star"></span>Earn points</li>
How can I achieve this with CSS without blocking the entire list?
If you know the list item position, and it is fixed within the parent list (it's always 1st, or 2nd, etc...), you can use nth-child. So, if the item is third in the list, you can do:
ul li:nth-child(3) {
display: none;
}
However, you still need to qualify the parent ul; otherwise, this will affect all list elements on the page.
If this is not the case, you might have to use JavaScript. And if data-page="earn" is unique to the contained, element, you can do something like this if You have jQuery. Otherwise you can use querySelector:
$('a[data-page="earn"]').parent('li').remove();
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'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.
I have a tab system built in css using unordered lists and list items. I would like to embed a second tab structure using the same visual style within my content region. I was able to do that and everything functioned, but there is an appearance issue. Within my content region I have a different set up ul definitions. I would essentially like to tell one div to follow half of the instructions defined in the content region. The spacing and that type of formatting is needed, but I would like the ul stuff ignored.
If anyone has experience in this, I will gladly supply any needed code. I didn't want to post a bunch of stuff that didn't assist in solving the problem though.
Thanks for your help
You need to specifically target the lis and uls only in your content and override values you dont want or change.
If your content is in a wrapper called #content, and the tabs are called .tabs then do
#content .tabs {
background-image:none;
margin:0px;
}
and so on, setting the values you need.
How are the tabs styled? Use the exact same selectors but put a selector in front of them, like the content wrapper so you can target them specifically.
Hard to give you an exact answer without any code.
Apply an "un-reset" CSS block to your content region.
See: https://github.com/jbcrawford/Un-ResetStylesheet
or: http://noscope.com/vanilla-css
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.