I am having soome problems with the :nth-child pseudoclass.
What I want to do is select the 9th child, and than every following 6th child.
so first 9
than 15
than 21
than 27
than 33
etc.. etc..
I thought that it should work by putting this in my css:
.child-div:nth-child(9n+6) p {
margin: 0;
}
It didn't..
I tried al diffrent formules like 10n+6, 6+9n and so on..
I followed this tutorial
But that didn't explain it eighter.
Does someone know why it doesn't work, can you only make formules like 4n+4 or something?
You were close to solution :
.child-div:nth-child(6n+9) p {
margin: 0;
}
Working example here : http://jsfiddle.net/5Y49A/1/
That's what you need:
.child-div:nth-child(6n+9) p {
margin: 0;
}
This means it selects every sixth element starting from the ninth.
Check out this online tool if you have problems with nth-child:
:nth tester
I believe you want
.child-div:nth-child(6n+9) p {
margin: 0;
}
This means every 6th item, starting at 9.
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
It should be
.child-div p:nth-of-type(6n+9){
margin: 0;
}
Related
After reading tutorial after tutorial regarding Less (LessCSS), I was just wondering how this & operator is supposed to be used. I know it's referring the parent element like:
div {
&.fullheight {
height: 100%;
}
}
// turns into
div.fullheight {
height: 100%;
}
But I often saw this:
div {
span {
& {
padding: 1em;
margin: 1em;
}
}
}
// turns into
div span {
padding: 1em;
margin: 1em;
}
Like when using ONLY the & operator inside of a class, it represents pretty much the parent element, but is doing this bad practise since you can have the same result when you would type like this:
div {
span {
padding: 1em;
margin: 1em;
}
}
Both work, so is it bad/good practise or are each of them maybe used in different situations?
For extra clarity, below is the link to an answer where I first saw that you can write & only in a class without anything else.
LESSCSS - use calculation and return value - First post by ScottS, fourth solution in his post.
Generally writing something like below would be considered as bad practice because the & there is just redundant and does no value add at all. It just outputs the entire parent selector div span.
div {
span {
& {
padding: 1em;
margin: 1em;
}
}
}
So, you should avoid writing such selectors which use only the & (parent selector).
The other example to which you have linked is an interesting case which I would term as an educated hack to get around the variable scoping and lazy loading concepts in Less.
Assume that the same code was written without the parent selectors (like below).
#unit:em;
#basevalue:1;
#val: 1;
#setUnit: unit(#basevalue*#val, #unit);
.someAwesomeClass {
#val: .2;
padding: #setUnit;
#val: .1;
margin: #setUnit;
}
Here the #val variable is declared twice within the same block. Since Less does lazy loading of the variables, they need not be declared before being used (and) if the same variable is declared twice or more within the same scope, the last declaration would win.
When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to CSS itself where the last property inside a definition is used to determine the value.
So, the compiled CSS output would have the value as 0.1em for both padding and margin whereas the expectation is for padding to be 0.2em and for margin to be 0.1em.
To overcome this, the author of that answer has introduced two namespaces (with no name) and has thus restricted the scoping issue. The variable defined within each nested block becomes local to that block only and so will be considered as two separate variables.
#unit:em;
#basevalue:1;
#val: 1;
#setUnit: unit(#basevalue*#val, #unit);
.someAwesomeClass {
&{
#val: .2; /* this declaration applies only within this nest */
padding: #setUnit;
}
&{
#val: .1; /* this declaration applies only within this nest */
margin: #setUnit;
}
}
As indicated by the author of that answer (in the first line), it was a workaround because there was no way to create a true function with Less.
But starting with Less v2, we can define our own custom functions in Less and use them as described in this answer by Bass Jobsen. The ability to write such custom functions should eliminate the need to write such hacks.
You can also refer to the comment by seven-phases-max in the same thread for a solution without the need for such hacks.
Bottomline is that usage of & alone as a selector is a bad practice. The solution in the linked answer was a hack which was useful in earlier versions of Less. It is still useful but there are alternate options and so & alone as a selector should be used only in extremely rare circumstances where none of the other option work.
I have a program that checks the status/value of a datapoint and when that datapoint is 0,1,2 it should change the color of a circle (0=green, 1=yellow, 2=red).
My DIV is like this:
<div class="circle"></div>
with the CSS being:
.circle{
border-radius:50%;
width:30px;
height: 30px;
background-color: #2aa700;
float: left;
margin: 0 20px 0 0;
}
Now, I have no problem changing the css to a .circlegreen, .circleyellow, .circlered if that makes sense. Just trying to get a handle on how to change that on the fly.
This application has several 'boxes' that are identical in layout (User Controls). I iterate through a database and fill them in. If the 'status' changes, then I want to update the circle color.
Hope that makes sense.
I hope this is what you were looking for:
$(function() {
if ($('#hiddenFieldStatus').val() == "0")
{
$('.circle').css('background-color', 'green');
}
});
Something like this.
You you want to change for only one div means give id to that particular div and use the following code:
<div id="myDiv"></div>
$(function() {
//check for some condition if yes execute the following:
$('#myDiv').css('background-color', 'green');
}});
Both answers above are correct. I resolved it in the following manner:
Select Case CInt(strStatus)
Case 1
divStatus.Attributes.CssStyle.Add("Background-Color","#2aa700")
Case 2
divStatus.Attributes.CssStyle.Add("Background-Color","#FF0000")
Case Is > 2
divStatus.Attributes.CssStyle.Add("Background-Color","#FF0000")
Case Else
divStatus.Attributes.CssStyle.Add("Background-Color","#FFFF00")
End Select
That worked for me. Yes, I think I have an extra statement in there instead of a greater than or equal to, but I am ok with that :)
Is there a way to use CSS selectors to get the middle child in a list of elements?
I know that there is no literal :middle-child selector, but is there another way without resorting to Javascript?
This has been working well for me:
*:not(:first-child):not(:last-child) {
...
}
You can see an example of this here: http://codepen.io/bentomas/pen/Gwqoe
The one caveat to this is that it only works in IE 9+: http://caniuse.com/#feat=css-sel3
While not elegant, if you know the upper and lower limits of the total number of elements, you could take a brute force approach to select the middle element.
For example, the following rules will select the middle element in a set of 5, 7, or 9 elements.
div:nth-child(3):nth-last-child(3) {
/* The middle element in a set of 5 is the 3rd element */
}
div:nth-child(4):nth-last-child(4) {
/* The middle element in a set of 7 is the 4th element */
}
div:nth-child(5):nth-last-child(5) {
/* The middle element in a set of 9 is the 5th element */
}
Or with Sass:
#for $i from 3 through 5 {
div:nth-child(#{$i}):nth-last-child(#{$i}) {
/* The middle element */
}
}
You can use the "not first and not last" approach, like so:
CSS
li:not(:first-child):not(:last-child) {
color:red;
}
HTML
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Check the JsFiddle
If you want to apply a style to all elements that are neither first children nor last children, you could use :not(:first-child), apply the style, and then use :last-child to 'take the style away' from the last element. But you'd have to think about what happens when there are less than 3 elements.
I've encountered the need to target the middle child on several occasions, and I've taken to using this sass mixin I wrote after referencing many similar questions, and their respective answers.
// Generate a reasonable number rules limited by $n.
#mixin middle-child($n) {
// There is no middle for nChildren less than 3,
// so lets just start at 3.
#for $i from 3 to $n {
// Find the middle, bias right for odd numbers.
$mid: math.ceil(math.div($i, 2));
// Select only those sets of children that number $i.
&:first-child:nth-last-child(#{$i}) {
// Select the middle child of that set.
~ :nth-child(#{$mid}) {
#content; // Apply your styles.
}
}
}
}
Usage:
.navigation {
background-color: #ba0020;
.nav-item {
color: white;
#include middle-child( 8 ) {
font-weight: 900;
}
}
}
Have you tried :nth-child(#) ?
Depending on which one you want to select you just replace # with the number.
Javascript is the only way to do this client side.
I need to make every two rows of my table grey and I would prefer to use nth-child if possible.
I've messed around with Chris Coyier's nth-child tester but still can't get it.
I need the following formula:
1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey
and so on. I'd prefer not to put a class in the html as I'm sure that's going to be a suggestion from some. If there is a way to pull this off with nth-child, that's what I'm looking for.
Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.
So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:
div:nth-child(4n), div:nth-child(4n-1) {
background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
background: blue;
}
That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.
NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.
Here's what I'm using to right-align the first column of each table.
table td:nth-child(2n-1) {
align: right;
text-align: right;
}
#Eric's answer is exactly right - but if you want to easily extend this to groups of 3, 4, 5, etc, and you're using Sass, here's the code (if you want more groups, just increase $largestGroupSize):
.table-with-grouped-rows {
// generate styles for .groups-of-2, .groups-of-3, etc.
$largestGroupSize: 6;
#for $groupNumPerColor from 2 through $largestGroupSize{
$totalGroupNum: $groupNumPerColor * 2;
&.groups-of-#{$groupNumPerColor} {
$start: $totalGroupNum - 1;
$end: $groupNumPerColor;
#for $primaryBgIndex from $start through $end {
$nthString: #{$totalGroupNum}n - #{$primaryBgIndex};
> tbody > tr:nth-of-type(#{$nthString}) > td {
background-color: $white;
}
}
$start: $groupNumPerColor - 1;
$end: 0;
#for $alternateBgIndex from $start through $end {
$nthString: #{$totalGroupNum}n - #{$alternateBgIndex};
> tbody > tr:nth-of-type(#{$nthString}) > td {
background-color: $light-gray;
}
}
}
}
}
And then in your markup, on the <table> element, you'd simply add the classes table-with-grouped-rows and groups-of-{n}. For example, if you want a table with groups of 3, you'd write:
<table class="table-with-grouped-rows groups-of-3">
Boom.
I would like to calculate the width of child-container (div etc) in percentages depending on the parent container with LESS CSS.
I am using the forumula by Ethan Marcotte: target / context = result.
Parent container: 620px
Child container: 140px
I am using this calculation:
div.child-container {
width: (140/620)*100%;
}
However the output is:
div.child-container {
width: 0.2258064516129;
}
I would like to move the decimal point two digits and add the %, like this:
div.child-container {
width: 22.58064516129%;
}
Any hints greatly appreciated.
According to the LESS CSS website, you need to change the order of your equation
The output is pretty much what you expect—LESS understands the difference between colors and units. If a unit is used in an operation, like in:
#var: 1px + 5;
LESS will use that unit for the final output—6px in this case.
It should be:
width: 100%*(140/620);
Maybe the percentage function didn't exist when OP was asking but for future reference I add this answer.
div.child-container {
width: percentage(140/620);
}
As for 2022, LESS 4.0 and division operator concerned:
From 4.0, No division is performed outside of parens using / operator.
#color: #222 / 2; // results in `#222 / 2`, not #111 (!)
background-color: (#FFFFFF / 16); //results is #101010
See the docs.