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
Related
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
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.
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/
I discovered the <details> element for html5, and that made me want to determine whether it was possible to implement a simple and reusable show/hide via css alone.
I have created a show/hide mechanism in the past for showing and hiding content by giving two elements relative positioning and one a negative z-index, and then decreasing the z-index of the front element on hover (and increasing the z-index of the back element on hover).
However, that method only works for elements that are in the same location. Are there other techniques for simulating show/hide on non-overlapping elements? e.g. a title that causes a section of descriptive text to display.
Trivial example code that I would like to be able to apply a show/hide to:
<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>
And yes, I do know that jQuery exists.
there is a plethora of options based on the structure (for modern browsers).
Have a look at the
selector + selector adjacent sibling selector
selector ~ selector general sibling selector
selector selector descendant selector
selector > selector child selector
These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.
here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/
Try this using nested divs and targets.
I'm not a CSS guru, so there may be all kinds of flaws with this, but it seems to work.
http://jsfiddle.net/NmdxC/6/
#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }
CSS without the exact code is hard to visualize, but what is wrong with changing the display or visibility declarations dangling from a :hover?
a #myelement{display:none;}
a:hover #myelement{display:block;}
I problably misunderstood the question...care to add code?
First thing that springs to mind is something like:
<a class="blah" href="#">Hello<span>Test</span></a>
a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}
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.