I have one element which is styled by two css documents:
1.
ul[editable="yes"] li {
background:black;
}
2.
#menu li {
background:white;
}
As you might have guessed the element I am styling is an LI which is located in the #menu element.
How can i make the "ul[editable="yes"] li" be dominant over "#menu li"?
Thanks in advance :)
background:black !IMPORTANT;
You can read more about !IMPORTANT here : http://www.w3.org/TR/CSS21/cascade.html#important-rules
I am presuming that #menu wont be the id of ul to whose li child you are trying to target in first case. (Because IDs are unique and if you are giving same ID to different ul, you are doing it wrong).
The solution would be
#menu ul[editable="yes"] li {
background:black;
}
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
Is it possible to remove the dot before each of these fields using CSS? I cannot seem to find the ability to do so. thanks!
http://www.inksharks.com/kbca-registration/
There's a background image added to each li element. You have to remove it by adding the following CSS
ul > li, .dark-icons ul > li {
background-image: none;
}
you may try
.gform_body ul li{list-style:none;}
if above code does not work then
.gform_body ul li{list-style:none !important;}
I want to make my wordpress menu items have 2 different background colors: one for the link and one for :hover. I'm a CSS beginner and found a solution but unfortunately it's not a good one because I target by the menu id generated by wordpress and if I delete the menu and create another one, that id will be gone and my styling will not work anymore.
Example:
menu-item-1212 a {
background-color:#fff;
}
menu-item-1212 a:hover{
background-color:#000;
}
Is there a more elegant way to solve this so that no matter what id the first menu item will have, it will retain that background-color and the hover one?
I've searched online for an alternative and found :nth-child. I did tried to create something like this:(but it didn't worked)
#menu-secondary li a:nth-child(1) {
background-color:#fff;
}
#menu secondari li a:hover:nth-child(1) {
background-color:#000;
}
Will appreciate any suggestion, thanks.
You are targeting an anchor which is the nth child of li element. Each li only has one anchor probably. You need to target li as the nth child of the menu, like this:
#menu-secondary li:nth-child(1) a {
background-color:#fff;
}
#menu secondari li:nth-child(1) a:hover {
background-color:#000;
}
You won't even need nth-child if you are using a common background color and common hover color..
#menu-secondary li a {
/* Styles goes here */
}
As you said you are not looking forward to use an id as it may be dynamic, than you can also select the elements using element selector if it's unique, like
div.class_name ul li a { /* class_name indicates your wrapper element class name */
/* Styles goes here */
}
Also be sure you make your anchor tag display: block; if you want to cover up entire li
I am trying to create a navigation menu and I would like my first <li> to line up perfectly with the container above it but I need some spacing to the right of the first <li> so I'm trying to do something like:
nav .innercontainer ul li:nth-of-type(2n+1){ /*only happen after the first <li>*/
margin-left:20px;
}
Thanks these pseudo select elements are confusing as hell.
The easiest way to do this is with the + selector:
ul > li + li{
/* all li elements except the first */
}
nav .innercontainer ul li{
margin-left:20px;
}
nav .innercontainer ul li:first{
margin-left:0;
}
if i get it right, its simple this way
I have an area that is identified by a #id and there is a CSS like:
#id ul li {
margin:0;
}
can I, for a specific UL in that area, override the margin-setting? I understand that #id creates very high priority in evaluating the formatting.
I have tried:
.myclass ul li {
margin-left: 20px;
}
and
#id ul.myclass {
as well as
#id li.myclass {
Is it even possible?
I agree with SWilk, avoid !important if possible (and it is possible here). Some other solutions that SWilk did not offer is:
#id ul.myclass li {
or...
#id ul li.myclass {
The key is increasing the specificity of the selector, which the above, and SWilk's solutions do. The reason your original solutions did not work is that you did not include the other tag (ul or li) nor the #id with your addition of the .myclass.
Added after your comment that showed structure:
If your html is this (as you stated in your comment):
<div id="ja-col2">
<div>....
<ul class="latestnews">
<li class="latestnews">
And your current css is (as stated in another comment):
#ja-col1 ul li,
#ja-col2 ul li {
margin:0; padding-left:15px;
}
#ja-col2 .latestnews ul li, /*does not exist*/
.latestnews #ja-col2 ul li, /*does not exist*/
.latestnews ul li, /*does not exist*/
ul.latestnews li.latestnews {
list-style:disc outside url("../images/bullet.gif");
margin-left:15px; padding-left:15px;
}
ul li { line-height:180%; margin-left:30px; }
The reason you are not seeing any change is because three of your selector paths do not exist in your html structure, and the one that wins by specificity is the very first group. You need:
#ja-col2 ul.latestnews li
To override the #ja-col2 ul li.
.myclass ul li {
margin-left: 20px !important;
}
Should do the trick :)
Use pseudo fake :not ID
.myclass:not(#f) ul li {
margin-left: 20px;
}
#hello .hello-in{
color:red;
}
.hello-in:not(#f){
color:blue;
}
<div id="hello">
<div class="hello-in">
Hello I am red
</div>
</div>
you can even use :not(#♥) or any html4/5 ( depends on page type ) character
Avoid using !important. This is hard to debug and is very probable, that it will interfere with other selectors. Especially if you will try to change css in few months from now, when you will forget there was an !important clause in some place.
You need to put more specific selector than the previous one. Just use the class and id parts in one selector.
Try using either
#id .myclass ul li {
margin-left: 20px;
}
or
.myclass #id ul li {
margin-left: 20px;
}
depending on where the element with "myclass" class is located in the DOM tree - if it is the parent of the #id element use first example, otherwise the second.
If you want to be independent of the #id element, try to use:
#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
margin-left: 20px;
}
This will work for all li's inside ul inside .myclass element, and it will not matter whether there is any #id element in the tree.
Best regards,
SWilk
http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override
In order to ensure that users can control styles, CSS2 changes the semantics of the "!important" operator defined in CSS1. In CSS1, authors always had final say over styles. In CSS2, if a user's style sheet contains "!important", it takes precedence over any applicable rule in an author's style sheet. This is an important feature to users who require or must avoid certain color combinations or contrasts, users who require large fonts, etc. For instance, the following rule specifies a large font size for paragraph text and would override an author rule of equal weight:
P { font-size: 24pt ! important }