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();
Related
I have an issue with my CSS3 selection. I have a table, inside the table are input elements (text) 3 for each row. Each one in that row containing a specific data-attr. Now I have a css selection for selecting all but ones containing the data-attr labeled data-sl="inputs-calc-sub-label" and data-sl="inputs-calc-add-label" (for now) I am just trying to change the background. But here is my selection
.getLength > input:not([data-sl='inputs-calc-sub-label'])
But it applies styles to all elements. Again I want to ignore the input with that data-attr. How can I do this? What am I doing wrong? I am working on the latest version of chrome right now. Maybe the version before. Can someone help me with this? All I want to do is select all but the ones containing the data-attr.
We can't really help without seeing your corresponding html to this css, however I think the problem is with the css selector you are using.
The element>element selector is used to select elements with a specific parent.
Note: Elements that are not directly a child of the specified parent, are not selected.
therefore in your example
the .getLength must have a direct child of input
<td class="getLength"><input type="text" data-attr="normal"</td>
here's a fiddle for more help
https://jsfiddle.net/7s1nbarh/1/
.getLength:not([data-sl='inputs-calc-sub-label']) {
background-color: lightblue;
}
input {
background-color: black;
}
<input class="getLength"/>
<input class="getLength" data-sl='inputs-calc-sub-label'/>
If you want to keep the inputs the way they are, without adding in unnecessary parent elements, simply change the CSS selector to act directly upon the elements of the class, and not their children.
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
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
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/