As I understand in LessCSS added feature which allows us to select parent element.
Here is an example of it.
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
The output will be.
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}
But what if I want to be the output like this. Is it possible or no.
.header .no-borderradius .menu {
background-image: url('images/button-background.png');
}
Thanks for your attention.
Related
My HTML:
<div id="form" class="special">
<div class="header">My special form</div>
<div>
And the following sass code:
#form {
.header {
padding: 20px 10px;
.special & {
background: $special-color;
}
}
}
Which produces:
#form .header {
padding: 20px 10px;
}
.special #form .header {
background: #7cc52c;
}
However this doesn't give me the result I want. Instead of the CSS above I want to have: .special#form .header (the element form with class special, not the element .special which has form)
You can achieve your desired css this way.
#form {
.header {
padding: 20px 10px;
#at-root #{selector-replace(&, '#form', '.special#form')} {
background: blue;
}
}
}
This scss compiles to the following css
#form .header {
padding: 20px 10px;
}
.special#form .header {
background: blue;
}
Using the selector-replace function, you can easily change the part of the compound selector that needs changing. In this example, that would be replacing #form with .special#form. The #at-root directive ensures that the selector is placed at the top level and not nested within any selector.
When the parent selector is appended and nested as you did in your question, it reverses the selector. There are situations where this might be useful, one such situation is when working with Modernizr as illustrated in one of the slides on here
Hope this helps.
The simplest way to do this is by using #at-root and interpolation
$special-color:#7cc52c;
#form {
.header {
padding: 20px 10px;
// use #at-root to move .special out of #form .header
#at-root {
// append #form .header using the & selector
// note! you need to use interpolation #{} to
// remove the white space between .special and #form
.special#{&} {
background: $special-color;
}
}
}
}
http://commerciallynks4.agricharts.com/
I'm trying to hide the background image (the arrow) on the Home menu.
.menu div:nth-of-type(1) {
background-image: none !important;
}
And also tried:
.menu a:nth-of-type(1) {
background-image: none !important;
}
Neither works and I've started just trying anything but still no dice.
.menuitem:first-child .menu {
background-image: none;
}
Can be:
#topmenu .menuitem:first-child > .menu {
background-image: none;
}
You have to use the structure more closely
tr.menubar_color td:first-child div.menu {
background-image:none;
}
Result:
Try this
table tr:first-child td .menu{background-image:none;}
.menuitem:first-of-type > .menu {
background-image: none;
}
I have a main menu and 4 colours and Id like each colour to cycle through 1-4 then start again if there are more than 4 items.
But each menu item only receives the first colour - this is my CSS (compiled from less):
.main-nav li a:nth-child(4n+1) {
background-color: #7ebdeb;
}
.main-nav li a:nth-child(4n+2) {
background-color: #abc081;
}
.main-nav li a:nth-child(4n+3) {
background-color: #f4d1a2;
}
.main-nav li a:nth-child(4n+4) {
background-color: #e96956;
}
I have no other background colours specified - I've been racking my brain and have tried several online nth-child testers to double check the specific selectors but can't work out what's going wrong sorry.
You are targeting the same element in each list item, the anchor, repeatedly. Each list item only has one child. You probably want:
.main-nav li:nth-child(4n+1) {
background-color: #7ebdeb;
}
.main-nav li:nth-child(4n+2) {
background-color: #abc081;
}
.main-nav li:nth-child(4n+3) {
background-color: #f4d1a2;
}
.main-nav li:nth-child(4n+4) {
background-color: #e96956;
}
jsFiddle example
I guess this is what you want:
JSFiddle
.main-nav li:nth-child(4n+1) a {
background-color: #7ebdeb;
}
.main-nav li:nth-child(4n+2) a {
background-color: #abc081;
}
.main-nav li:nth-child(4n+3) a {
background-color: #f4d1a2;
}
.main-nav li:nth-child(4n+4) a {
background-color: #e96956;
}
I'm sorry, I'm a complete newbie to CSS and I'm trying to create a custom display for an xml file with CSS.
My question is: how can I display a certain text before a certain element, e. g. "Project:" before each element?
I tried like that with ":before" but that does not seem to do the trick
ThinkingRock
{
background-color: #ffffff;
width: 100%;
}
project
{
:before{content:"Projekt:";};
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
description
{
color: #FF0000;
font-size: 20pt;
}
notes
{
color: #0000FF;
font-size: 20pt;
}
id, created, parent, topic, context, state, done, priority, modified, purpose, success, brainstorming, processed
{
display: block;
color: #000000;
margin-left: 20pt;
}
The xml file use is this one: http://www.trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
I've only added the first line <?xml-stylesheet type="text/css" href="thinkingrock.css"?>
:before is a pseudo-selector itself, so it needs its own style block, like below:
project:before {
content:"Projekt:";
}
project {
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
fiddle: http://jsfiddle.net/wNEt3/
fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/
Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D
use z-index , z-index Only Work with position: fixed,relative,absolute:
project:before {
width:100%;
height:100%;
position:absolute;
content:"";
z-index:-2;
}
project {
position:relative;
display: block;
z-index:30;
}
or:
project:before {
width:100%;
height:100%;
position:relative;
content:"";
z-index:-2;
}
project {
display: block;
z-index:30;
}
documention : https://www.w3schools.com/cssref/pr_pos_z-index.asp
So I have this bit of Less
#footer {
ul {
// stuff
}
li {
// stuff
}
}
everything is contained nicely within #footer, but say I want to prefix #footer. How would I prefix footer with a class like .ie6 or .ie7, but within the less "closure" of #footer?
for example, I want to do this (observe pseudo syntax >.ie6, >.ie7) :
#footer {
<.ie6, <.ie7 {
// ie6/7 stuff
}
ul {
// stuff
}
li {
// stuff
}
}
and have it generate this:
.ie6 #footer,
.ie7 #footer {}
#footer {}
#footer ul {}
#footer li {}
Any idea how to accomplish this with Less?
I think this might be of interest to you: https://github.com/cloudhead/less.js/pull/268#issuecomment-1207479
What you want to do isn't possible yet in the master less.js. But a guy, James Foster, forked it and added this feature.
Example:
#box {
#other-box {
margin: 10px 0 0;
.ie7 & {
margin: 5px 0 0;
}
}
}
I don't believe it's possible to place the class before the #footer, unless you wrapped everything in .ie6/7 instead of #footer
LESS website shows the following example:
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
Which I think is the only way to achieve similar to what you want, so:
#footer {
.ie6{
// ie6 stuff
}
.ie7{
//ie7 stuff
}
ul {
// stuff
}
li {
// stuff
}
}
Would generate with the classes after the ID, I can't seem to find a way to achieve what you want without nesting everything inside the .ie6/7