This is an easy one, but i can no find the right way to do this. I have the following style definition:
.main_section nav a {
color:#999;
...
}
So this style applies to the a in the nav in the .main_section. Now I want to extend this so that also li elements are affected. What I would do is to duplicate the code, like:
.main_section nav li {
color:#999;
...
}
But this just feels wrong. I want to unify both style specs into one. How can I do that?
use comma (,) to define same style on multiple elements
.main_section nav a,.main_section nav li {
color:#999;
...
}
Have you tried using a CSS preprocessor such as LESS or SASS.
Using one of these you would be able to write your code like the following:
.main_section {
nav {
a,
li {
color: #999;
}
}
}
Try
.main_section nav a, .main_section nav li
{
color:#999;
...
}
Related
I'm trying to learn SASS and I would like to style the first level of my multi level menu using sass. Let's say this is the markup:
ul.menu
li.menu-item
ul.sub-menu
li.menu-item
In CSS, I can target the first level with
ul.menu > menu-item
But I can't make ">" work on SASS. Is there another way to do this?
Edit:
Forgot to add that I'm using the & so Im trying it with this markup:
.menu{
> &-item{
color: red;
}
}
To generate this css
.menu > .menu-item {
color: red;
}
your sass should look like
.menu {
& > &-item {
color: red;
}
}
I would like to change the size and color of my font on a wordpress menu,however when i use the following code
#access ul{
font-size:25px;
color:red;
}
the size changes but color remains the same, how can i edit my code to get the color working as well
You should be able to change non-current menu items with...
#access li a { color: #000; }
and if the current page is the current menu item change the built-in wordpress class...
.current-menu-item a { color:#FFF; }
(1) Something is overriding on the properties you set here in CSS.
(2) Change the color of li instead of ul
(3) Provide your ul structure code also
Try
#access ul{font-size:25px; color:red !important}
Normally, the color property is inherited, but anchor elements does not inherit attributes like color. If you want your <a> tags to inherit the color use:
#access a { color: inherit; }
try this
#access li a {
color: red;
}
or
a{
color:inherit
}
#access li{
color: red;
}
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;
}
I want to apply same style to
a, a:hover
of elements residing inside an id, class and element. What's the most valid and effective syntax?
Example:
#leftmenu .shortcuts ul li a, a:hover {
text-decoration: none;
}
Regards,
//t
CSS isn't that smart, so you'll have to explicitly write out that first part, again. As #sdleihssirhc noted, you can omit li, as ul elements are assumed to already contain lis, so the selector would still work:
#leftmenu .shortcuts ul a,
#leftmenu .shortcuts ul a:hover {
text-decoration: none;
}
I'd consider giving that ul an id, as it would condense your CSS considerably:
#lm_ul a, #lm_ul a:hover {
text-decoration: none;
}
or you could just do something similar to apply to all links inside a container with an id="leftMenu"
CSS:
#leftMenu > * a, #leftMenu > * a:hover{ .... }
HTML:
<ul>
<li><span><a>item1</a></span></li>
<li><p><a>item1</a></p></li>
<li><div><a>item1</a></div></li>
<li><em><a>item1</a></em></li>
</ul>
This will take into account every element a no matter what is wrapping the links inside the container with id="leftMenu"
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 }