I have three parent class elements that do the same thing. How can I write it out in one line.
Example:
I want to make the following into one line:
.parent1 li > div.example> a span {color:red;}
.parent2 li > div.example> a span {color:red;}
.parent3 li > div.example> a span {color:red;}
Goal:
.parent1 li, .parent2 li, .parent3 li > div.example > a span {color:red;}
Note: I have spent numerous time searching Google, Bing, and Stack Overflow for a solution, but not able to find because I am not sure what I am asking for....
There's no way to do that in such matter. You can only do something like this:
.parent1 li > div.example > a span,
.parent2 li > div.example > a span,
.parent3 li > div.example > a span {
color:red;
}
And remove unnecesary whitespace characters (don't do this, please, minifier will take care of this for you):
.parent1 li > div.example > a span, .parent2 li > div.example > a span, .parent3 li > div.example > a span { color:red; }
Also, note that having such generic selectors (and such complex) are not considered to be a good practice (specificity is hard to manage and you have little control over what exactly will get styled) if you can, just add a class to span elements that you want to be styled differently.
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.
I'm having trouble trying to understand why there is a selector after the :hover pseudo class, and not before it. How and why does this work?
This works
div li:hover > ul
{
display: block;
}
Why wouldn't this work?
div li > ul:hover
{
display: block;
}
I've done many searches trying to figure out why to put a selector or selectors after it( :hover pseudo class); and the details of how it targets it, but I just can't seem to find any information about it. Thank you in advanced!
Your selectors are logically different.
li:hover > ul matches a ul inside of a hovered li.
li > ul:hover matches a hovered ul inside any li.
Your uls are probably hidden by default, so li > ul:hover isn't going to match anything.
In contrast, li:hover > ul matches the still-hidden ul as soon as the li is hovered, and shows it.
I've been reading about this everywhere, and from what I've read to select a list without selecting the nested list. I need to have this
.myclass > ul > li
//or even just
ul > li
I've been trying to get it to work unsuccessfully. The selector is selecting everything, including the nested list. What am I missing?
Please see the code on JS Bin:
http://jsbin.com/asipap/4/edit
some CSS styles are inherited from parent elements unless another style explicitly overrides it, you've set the color for all the list items, but haven't overridden it for any other matched selector. Simply adding li { color: black } should solve the issue.
You need to select the ul that are inside an ul?
.cats, .cats ul{list-style-type:none;}
.test li ul > li{color:red;} /* li ul: an ul inside a li */
This select all nested list, maybe you want to use > to limit the deep.
See it here http://jsbin.com/asipap/16/
This li element matches the .test > ul > li selector. Therefore, all text inside that li will be red, including the ul inside the li.
<li>Test 1.1
<ul>
<li>nested</li>
</ul>
</li>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does “>” mean in CSS rules?
I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :
#navigation ul li > ul {
/* some code in between */
}
but when i omit the > sign as
#navigation ul li ul {
/* some code in between */
}
this still works the same way.
what is the difference and when to use > sign ?
> Means the direct child of a selector, so
li > a will ONLY match an <a> which is directly inside an <li> for example.
If the html was <li><span><a> the <a> would not be matched.
Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in
<li><a> but also in <li><span><a>, for example.
Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
The > means a child element - it is the child selector. That is, directly / immediately nested after.
So, in your first example, the ul at the end of the selector must be directly descending from the li.
The "li > ul" syntax specifies that the ul must be a child of li. "li ul" instead says that the the styled ul is descendant of li, no matter how many levels below.
selector[1] > selector[2]{
[property]: value
}
This is called the child selector. In browsers that support it, it applies the styles to selector2 child elements of selector1.
Edit:
The second one you use I believe is called the Descendant selectors.
They should work identically, but it's there's a little difference. The decendant selector will apply to ALL decendants ,whereas the child selector applies only to the direct children of the parent.
You would use > when you want to target a direct descendant.
For example, .foo > .bar would target .bar only if it is the direct child, while .foo .bar would target any descendant of .foo that has the class .bar.
> is to be used when the second operand/element is a child of the first operand/element. When it's omitted; descendants are matched, which includes children.
Therefore, if your HTML is structured as you suggested (#navigation ul li ul) then if you have the following in your CSS:
#navigation ul {color:red;}
Then both #navigation ul AND #navigation ul li ul will be coloured red (the text) as they BOTH are descendants of #navigation ul.
But if you had the following in your CSS:
#navigation > ul {color:red;}
Then only #navigation ul would be coloured red as it is the only ul which is a direct child of #navigation
The ">" selector is the child selector, space is the descendant selector. If tag3 is inside of tag2, which is inside tag1, and you use a child selector, then your css rule won't apply to tag3 if you refer to tag3 inside of tag1, however, if you use the descendant selector, tag3 will be transitively inside tag1. This means that he descendant selector is more general than the child selector.
#navigation ul li > ul {
/* some code in between */
}
is more specific than
#navigation ul li ul {
/* some code in between */
}
because between the li tag inside the ul tag inside the tag with the id of navigation needs ul to be a direct child in the first example and in the second example ul doesn't need to be directly the child of li, li might have a child which is the parent of ul.
> is the child selector.
It will only select immediate children of the previous element. If it there is a
#navigation ul li ul li ul
element it will not be affected by the
#navigation ul li > ul
selector. But the
#navigation ul li ul
will be.
EDIT: #Nix is right, but he isn't telling the whole truth it seems. *Why isn't the p-enclosed ul ignored but only the span-enclosed? display: block vs inline perhaps? Who knows?
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 }