I have following code:
#adminmenu li.hideshow-news, li.hideshow-users, li.hideshow-pages, li.hideshow-gallery, li.hideshow-references, li.hideshow-settings {
display: none;
font-size: 11px;
background: #fff;
padding: 3px; }
I want to achieve (as I tried here) using only one line for diffrent classes on in div "adminmenu".
How to rewrite this?
Code written above is working only for first class #adminmenu li.hideshow-news, whether other following statments don't.
Do I really need to do:
#adminmenu li.hideshow-news {
display: none;
font-size: 11px;
background: #fff;
padding: 3px;
}
#adminmenu li.hideshow-users {
display: none;
font-size: 11px;
background: #fff;
padding: 3px;
}
.....
The grouping selector (,) groups complete selectors, not partial ones.
#adminmenu li.hideshow-news,
#adminmenu li.hideshow-users,
#adminmenu li.hideshow-pages,
#adminmenu li.hideshow-gallery,
#adminmenu li.hideshow-references,
#adminmenu li.hideshow-settings { ... }
That said, it might be easier to just say:
#adminmenu li { ... }
#adminmenu li.hideshow-news,#adminmenu li.hideshow-users,#adminmenu li.hideshow-pages, li.hideshow-gallery,#adminmenu li.hideshow-references,#adminmenu li.hideshow-settings {
display: none;
font-size: 11px;
background: #fff;
padding: 3px;}
You should use:
#adminmenu li.hideshow-news, #adminmenuli.hideshow-users, ETC...
{
}
Related
I'm trying to merge the style into one class but its showing an error. Look at the example below.
%banner-style{
banner {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
}
And I want it to merge with the parent class .parent
.parent{
color: red;
&_#extend %banner-style;
}
using & to merge into one class name. but showing error unless i do this
.parent{
color: red;
&_{#extend %banner-style};
}
Which is same as if I remove &_.
I wanted .parent_banner {...} but instead got .parent_ banner{...};
Does anyone know how I can accomplish this?
You are getting exactly what is supposed to happen. Extend does not "merge" classes, it extends another class/placeholder into a new selector's styles.
What that means is if I write:
%banner-style {
background: black;
}
.parent {
#extend %banner-style;
}
.other-selector {
#extend %banner-style;
color: red;
}
The css I get will be
.parent {
background: black;
}
.other-selector {
color: red;
background: black;
}
So you are getting expected results. If you'd like to make this "work" the way you want, you can just change your code to:
%banner-style {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
.parent{
color: red;
&_banner {
#extend %banner-style;
};
}
Note: I took out the banner block because it seems you don't want that (and banner isn't a normal html element).
I have two files
tab.less
.
tab {
display: inline-block;
font-size: 14px;
}
and tabs.less
.tabs {
border-bottom: 1px solid #grey;
.tab {
margin-right: 24px;
}
}
The question is how to import selector from another file because now css-loader generates two different selectors what is good, but I need to tell it that there should be selector from another file.
Thanks.
Try to use composition.
tab.less
.tab {
display: inline-block;
font-size: 14px;
}
tabs.less
.tabs {
border-bottom: 1px solid #grey;
.tab {
composes: tab from './tab.less';
margin-right: 24px;
}
}
Also check this article with most popular and useful cases with css-modules – http://andrewhfarmer.com/css-modules-by-example/#example-5-composition
I have next CSS:
.button {
background-color: black;
border-radius: 4px;
color: white;
}
a.button {
text-decoration: none;
color: white;
}
I want to remake it with LESS, something like:
.button {
background-color: black;
border-radius: 4px;
color: white;
a& {
text-decoration: none;
color: white;
}
}
But it generates next (wrong) CSS:
.button {
background-color: black;
border-radius: 4px;
color: white;
}
/* unexpected space */
a .button {
text-decoration: none;
color: white;
}
How can I do it right?
This is totally a version issue. As #freejosh commented, it is resolved in latest releases of LESS. If you take your code above to http://less2css.org/ then it works fine (which is running LESS 1.3.3, though you can change the version to 1.3.0 and see that it no longer functions as you expect and puts the space in).
Since you state you are running lessc 1.3.0, you need to upgrade your LESS version.
These elements are not necessarily nested, and therefore LESS nesting doesn't apply.
It isn't beautiful, but it works! :)
.button {
background-color: black;
border-radius: 4px;
color: white;
}
a,b,other{
&.button{
.button;
text-decoration: none;
color: white;
}
}
I am setting the style of list items like so:
ul.list li {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
ul.list li:hover {
background: #F7F7F7;
}
but I want to define a special list item for the title of the list only it inherits the previously defined style too. I know I could just give the above styling a class but that feels cumbersome. Do I have to manually "undo" everything just for the special list item or give the above styling a class? or is there a better way to do it? Maybe I shouldn't be using a list item for the title?
ul.list li.header {
font-size: 16px;
font-weight: bold;
}
If you're at liberty to use advanced CSS3 selectors, you can use the :not() selector:
ul.list li:not(.header) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
Otherwise, you'll just have to manually override them.
If the title of the list must be inside the list, I'd probably just (as you mentioned) "manually undo" them:
ul.list li.header {
font-size: 16px;
font-weight: bold;
background: transparent;
padding: 0;
height: auto;
}
It's not so bad.
If you only need to support modern browsers, you could do this:
.list li:not(:first-child) {
background: #FFFFFF;
padding: 0 5px 0 5px;
height: 20px;
}
.list li:first-child {
font-size: 16px;
font-weight: bold;
}
.list li:hover {
background: #F7F7F7;
}
This eliminates the need for any classes (though you could replace :first-child with .header if you do want to keep that class).
Help a CSS newbie out here. What I'm trying to do is very simple.
As I said in the image, I want the text to be in the same line. I tried everything i could think of.
Here is the index.php:
http://pastebin.com/9LVVFgUZ
Here is the style.css:
http://pastebin.com/v8Eius2A
Thanks.
Original code:
.box_con a {
color: #111111;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Remove the float, make the a element block-level and add a left margin like so:
.box_con a {
color: #111111;
display: block;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
margin-left: 150px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Result:
Adding to .box_con a these rules: float: left and width: 470px seems to get what you asked for in your image.