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;
}
}
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 have a website which includes a CSS file (main.css) that I am unable to change. I need to find a way to override all of the CSS styles in that file.
The main.css file (which must stay the same)
ul { padding-left: 25px; }
ul li { list-style-type: square; }
My custom css:
.personal ul { padding-left: 0px !important }
Is there a way to cancel out the entire scope of the main.css file?
this css is for all ui
ul { padding-left:25px;}
ul li{ list-style-type: square; }
try to make the different setting with class or id
ul .personal{ padding-left:25px;}
ul .personal li{ list-style-type: square; }
so determine in html what you want, which it use standard setting, which it use custom setting .personal
<ul > </ul> will use setting 1
<ul class='personal'> </ul> will use setting 2
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}
I'm building a wordpress theme. my menus are getting classes from wordpress, like: .current-menu-item, .current_page_item & I'm using them to customize my active menu background color:
.current-menu-item a, .current_page_item a {
background-color: #ffef38;
}
but the problem is I've a secondary menu in footer, which is getting this style from css too. css for my footer is quite simple:
#footnav {
float: right;
}
#footnav li {
display: inline-block;
border-right: 1px solid #fff;
padding: 0 0.5em;
}
#footnav li:last-child {
border-right: none;;
}
so my question is, how can I remove the active menu styles from my footer menu only?
Either configure the styles to whatever you want on the footer:
#footnav .current-menu-item a, #footnave .current_page_item a { background-color:transparent; }
or make your initial selector more specific:
nav.myclass .current-menu-item a, nav.myclass .current_page_item a {
background-color: #ffef38;
}
Since you sound like you're just concerned about the styling, I wouldn't think about touching the PHP that actually generates those classes in the first place, since they may be relied upon for other things (e.g. javascript.)
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;
...
}