I would like to do the following thing and I am wondering about the best way to go about.
I have a div which is each 20% of the container's width (5 blocks). I would like to give a different background color to each block but only using one CSS class. What is the best way to do it?
In the past, I used to create 5 different classes where only the bg color is different (as everything else is the same - 20% width and same height) but I think there is a better way to do it.
Is it possible to create a class in the CSS that handles the different bg colors for each container?
I am not very sure if it will work, but but can try this - have a same class for all the divs (as you are already having - say, the class is 'myDiv'). Then In css -
.myDiv:nth-child(1){
background-color: red;
}
.myDiv:nth-child(2){
background-color: blue;
}
.myDiv:nth-child(3){
background-color: yellow;
}
and so on..
Hope this helps :)
See http://www.w3.org/TR/css3-selectors/
in this link see css3 selector for li,div and ...
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
/* Alternate division enter code herecolours in CSS */
.mydiv:nth-child(1) { color: navy; }
.mydiv:nth-child(2) { color: green; }
.mydiv:nth-child(3) { color: maroon; }
.mydiv:nth-child(4) { color: purple; }
Play around with :nth-child or adjacent sibling selectors
Like so
.parent { width: 100%; }
.parent > div { width: 20%; float: left; }
.parent > div:nth-child(1) { background-color: black; }
.parent > div:nth-child(2) { background-color: blue; }
.parent > div:nth-child(3) { background-color: purple; }
.parent > div:nth-child(4) { background-color: orange; }
.parent > div:nth-child(5) { background-color: yellow; }
Example here
Related
I know that when you want to target a div with two classes with SCSS, it should be done like this:
HTML:
<div class="item active">...</div>
SCSS:
.item {
&.active {
/* enter code here */
}
}
But when I want to target an element's after, what then? As in with CSS:
.item.active:after {
/* enter code here */
}
Thanks!
Well you can do it in a few ways
a. This you should use if you want to add some styles to the .active class also.
.item {
background: red;
height: 100px;
width: 100px;
&.active {
&:after{
content: "aaa";
}
}
}
or
b. This you should use if you want just to add some styles to the :after pseudo-element if item has class active
.item {
background: red;
height: 100px;
width: 100px;
&.active:after{
content: "aaa";
}
}
see jsFiddle
Try:
.item {
&.active {
&:after {
/* enter code here */
}
}
}
.item {
&.active {
/* enter code here */
&:after{
/* enter code here */
}
}
}
I have a button class .btn and want to select only when it is with a link. What to add to a so I will get a.btn using SCSS and my code bellow?
SCSS:
.btn {
background: red;
a {
background: blue;
}
}
I want to get this in css:
.btn {
background: red;
}
a.btn {
background: blue;
}
Logical will be to do this a&. But it gives an error. a & and & a is giving a different result.
I know that this can be done with #at-root a#{&} but it is too ugly =) Is there a pretty way?
.btn {
background: red;
#at-root a#{&} {
background: blue;
}
}
This should work:
a {
&.btn {
background: blue;
}
}
.btn {
background: red;
}
You can't write that in a single block. In case if that's what you are trying to do.
Since .btn& is not a valid scss, it seems that #at-root a#{&} is your only option.
How can I add CSS comments in LESS nested rules? Ex:
div{
span{
font-size: 16px;
color: #fff;
}
/*This is my comment*/
em{
color: blue;
}
}
This is the output I expect to get:
div span {
font-size: 16px;
color: #fff;
}
/*This is my comment*/
div em {
color: blue;
}
But, unfortunatelly this is how it is processed:
div {
/*This is my comment*/
}
div span {
font-size: 16px;
color: #fff;
}
div em {
color: blue;
}
Is it possible to make this?
This isn't possible using /* */.
The reason being that it is still under the div scope, so it won't work using /* */ comments.
However, in LESS you can use // for single line comments which doesn't go through the compiler (so doesn't end up in the compiled CSS code but will be in the LESS code).
Here is the official documentation on comments.
Well, you can get your comment inside nested rules:
div {
em {
/* This is my comment */
color: blue;
}
}
output:
div em {
/* This is my comment */
color: blue;
}
I hope this would be useful for you.
/*This is my comment*/
div {
em {
color: blue;
}
span {
font-size: 16px;
color: #fff;
}
}
and the output will be,
/*This is my comment*/
div em {
color: blue;
}
div span {
font-size: 16px;
color: #fff;
}
More or less it would be like what you are expecting !!!
I'm curious as to why this doens't work? My guess is that whatever element your targeting you have to go through its parent. Am I right or is there a trick? (no jquery)
Checkout the fiddle: http://jsfiddle.net/eMw5C/
HTML
This doesn't work
Trigun
<h1>This Works</h1>
<div class="yes-working">
<img src="https://i158.photobucket.com/albums/t109/hp_arianepotter/trigun-1.png" />
Trigun
</div>
/* This doesn't work */
.not-working img { width: 10em; clear: both; }
.not-working img:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }
/* This works */
.yes-working img { width: 10em; clear: both; }
.yes-working:hover a { color: red; }
.yes-working a { color: black; }
.yes-working a:hover { color: red; }
In the non working example, the anchor tag is not child of the img tag.
.not-working img:hover a { color: red; }
Should be:
.not-working img:hover ~ a { color: red; }
Works here: http://jsfiddle.net/eMw5C/1/
you have invalid path selector on .not-working class.. try this :
.not-working img:hover ~ a { color: red; }
syntax (AFAIK) :
"~" mean select next object
">" mean select children object in one step level bellow
but I don't think you can re-select parent object
CMIIW
Because .not-working img:hover a means that your anchor tag <a> is inside the img tag which is not true. It is true in the second case and that's why it is working.
Its worked :
.not-working img { width: 10em; clear: both; }
.not-working:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }
http://jsfiddle.net/aldiunanto/eMw5C/2/
I'm using LESS and want to match an special input whose type is text.
Currently, I'm doing this:
td {
input[type=text] {
width: 100px;
}
}
For my second input of type checkbox, I need another width. I tried this:
td {
input[type=text] {
width: 100px;
&:nth-child(2) {
width: 40px;
}
}
}
But this won't work. Any ideas how to combine [type=text] with :nth-child()?
Your LESS should translate to the following CSS without any bugs:
td input[type=text] {
width: 100px;
}
td input[type=text]:nth-child(2) {
width: 40px;
}
However, if you have other elements as siblings of your text inputs, these may be interfering with the :nth-child() declaration, as :nth-child() only looks at an element's position relative to all its other siblings in the same parent, not only to other elements of its kind (i.e. input[type=text]). For example, if you had a label as the second child, then your input won't be the second child anymore as that spot has been taken by the label.
If the only inputs you have within your td are all of [type=text] you should be able to get away with using :nth-of-type() instead:
// LESS
td {
input[type=text] {
width: 100px;
&:nth-of-type(2) {
width: 40px;
}
}
}
/* CSS */
td input[type=text] {
width: 100px;
}
td input[type=text]:nth-of-type(2) {
width: 40px;
}
Just remember, though, that it only looks at the element name input and not the [type=text] attribute!
Or if you know you'll only have two text inputs you can use the general sibling selector instead to grab the one that follows the first input:
// LESS
td {
input[type=text] {
width: 100px;
& ~ input[type=text] {
width: 40px;
}
}
}
/* CSS */
td input[type=text] {
width: 100px;
}
td input[type=text] ~ input[type=text] {
width: 40px;
}