I'm not sure if this is possible in CSS, but if it is, I would appreciate some help.
I have HTML similar to the following:
<div class="group"></div>
<div class="group"></div>
<div class="group subgroup"></div>
<div class="row"></div>
<div class="row"></div>
<div class="group"></div>
<div class="group subgroup"></div>
<div class="row"></div>
Is it possible to alternate the background colors of the row classes? Always starting with the same color? I've been having trouble achieving this using nth-child and I'm assuming it's because of the group/subgroup classes.
Manual html markup in jsfiddle of an example data set that could be returned and how it is designed to be styled:
http://jsfiddle.net/Qr5Za/
'always starting with the same color' means that the first row after
group/subgroup starts with red
If so, you can set background-color of the first .row red and the others magenta by:
.group ~ .row { /* select all rows comes after each group */
background-color: magenta;
}
.group + .row { /* select and override the first row after each group */
background-color: red;
}
JSBin Demo
These selectors are called General sibling combinator ~ and Adjacent sibling combinator +, you can find more details here.
Update
All new CSS3 selectors like :nth-child(n), :nth-of-type(n) matches every element that is the nth child or type, of its parent.
So the only way to achieve this, is putting .rows in a wrapper for each block:
<div class="group">This is a group</div>
<div class="group subgroup">This is a subgroup</div>
<div class="wrap">
<div class="row">This is the first row</div>
<div class="row">This is the second row</div>
<div class="row">This is the third row</div>
<div class="row">This is the forth row</div>
</div>
And selecting odd and even rows based on their position in the .wraper (their parent):
.row:nth-child(odd) {
background-color: red;
}
.row:nth-child(even) {
background-color: magenta;
}
JSBin Demo #2
.row:nth-of-type(n) + .row:nth-of-type(even){
background: green;
}
.row:nth-of-type(n) + .row:nth-of-type(odd){
background: orange;
}
.group.subgroup + .row:nth-of-type(n) {
background: blue;
}
Updated Demo
Related
I have layout that is generated dynamically so order of elements could change. Each element that is part of this layout has its own different class. I want to be able to select element of certain class but only if it is last child of its parent to apply styling. If element with different class is last child of its parent, it should not be selected. Is it possible to have this kind of scss selector and achieve this functionality without using javascript?
Example:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
I want to select element with class child3 only if it is last child of div with class parent.
So if child2 class element is last child of div class parent it is not selected, for example here:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Yes, and this is the normal CSS behaviour. You can do something like this:
.parent .child3:last-child {}
This is a rule that selects:
a .child3 element inside .parent.
.child3 element comes as the last, there's no other elements after that including text.
For SCSS, you can do something like this:
.parent {
.child3 {
&:last-child {
// Rules.
}
}
}
Example Snippet
.parent .child3:last-child {
background: #ccf;
}
<strong>Trial 1</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
<hr />
<strong>Trial 2</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Preview
You can select elements by their attributes, so something like this would achieve your goal.
.parent div {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px black;
}
.parent div:last-of-type[class="child3"] {
background-color: red;
}
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
https://www.w3schools.com/cssref/css_selectors.asp
This question already has answers here:
CSS - First child without certain class
(4 answers)
Closed 2 years ago.
This code is going to be used to overload the style of a page I dont control. I cannot change the HTML nor can I use JavaScript. I can only rely on good old CSS. The HTML is dynamic and look like this:
<div class="container">
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
I dont know how many children .container have. No nth-child() as far as I am aware of. The following example is valid too:
<div class="container">
<div class="item" style="display: none">l</div>
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
I want to apply a specific property to the first visible element. Here it is 'n'.
If all element are red:
.item {
background: red;
}
I would like to change it to blue:
??? {
background: blue;
}
I tried:
.item {
background: red;
}
.item:not([style='display: none']):first-child {
background: blue;
}
Demo:
.item {
background: red;
}
.item:not([style='display: none']):first-child {
background: blue;
}
<div class="container">
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
Here 'n' should have a blue background.
How can I achieve that? What selector should I use?
tl;dr (explanation followings):
.item[style='display: none'] + .item:not([style='display: none']) {
background: blue;
}
Alright, first we can achieve this by rethinking the problem. Asking for the first visible child is actually the same logic as asking the first child after the last hidden child.
CSS have some uncommon combinator. Here we are going to use the adjacent sibling combinator (+). Let the MSDN introduce it:
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
We can color every hidden .item following another hidden .item like that:
.item[style='display: none'] + .item[style='display: none'] {
background: blue;
}
But what we want is the first child after the last hidden child. Here the pseudo-attribute :not() will do the trick:
.item[style='display: none'] + .item:not([style='display: none']) {
background: blue;
}
Demo:
.item {
background: red;
}
.item[style='display: none'] + .item:not([style='display: none']) {
background: blue;
}
<div class="container">
<div class="item" style="display: none">l</div>
<div class="item" style="display: none">m</div>
<div class="item">n</div>
<div class="item">o</div>
<div class="item">p</div>
</div>
I want to use css3 nth-child to select matched elements based in their index in the whole document (like jquery :eq() selector) not based in the parent element.
<div id="container">
<div class="result">
<div class="active">content 1</div>
</div>
<div class="result">
<div class="active">content 2</div>
</div>
<div class="result">
<div class="active">content 2</div>
</div>
</div>
This css code select all elements because every .active is 1st child respective to the parent .result
.active:nth-child(1) {
background: red;
}
I tried also to make the body as parent
body > .active:nth-child(1) {
background: red;
}
But it can't do the job.
I want nth-child(1) selects content 1
and nth-child(2) selects content 2
I think you want to use nth-child on .result.
#container .result:nth-child(1) .active {
background: red;
}
JSBin
I want a margin on every row that I am using in Twitter Bootstrap, except if it's :last-of-type/:last-child but if it's the :only-child, I still want the margin. Any ideas?
EDIT
Using the answer given, I did the following SASS:
.container .row {
margin-bottom: 15px;
&:last-child:not(:only-child) {
margin-bottom: 0;
}
}
First of all note that CSS pseudo-classes such as :last-of-type/:last-child look through the children tree of the parent to match the desired child element, not through a list of classes. So, .row:last-of-type may or may not match the last row.
However if .rows are nested by a specific wrapper like .container, the following should work:
Example Here.
.container > :last-child:not(:only-child)
<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Here is a jQuery solution
var rowsNum = $('.your-rows').length;
if (rowsNum > 1) {
$('.your-rows').not(':last-child').css({'margin':'your margin'});
} else {
$('.your-rows').css({'margin':'your margin'});
}
First thing I think of is selecting the row only when there are more than two children.
Select the last rows only from the second row onwards:
.row:nth-child(n+2):last-child
Example
.container {
margin-bottom: 50px;
}
.container > .row:nth-child(n+2):last-child {
background: #F00;
}
<div class="container">
<div class="row">No color for only row</div>
</div>
<div class="container">
<div class="row">Color</div>
<div class="row">Color</div>
<div class="row">Color</div>
<div class="row">Color</div>
</div>
We have a DOM like this:
<div class="outer">
<div class="inner"> <!--// No "copyright" in this node //-->
<div class="content">...</div>
</div>
<div class="inner">
<div class="content">...</div>
<div class="copyright">...</div> <!--// DISPLAY THIS ONE //-->
</div>
<div class="inner">
<div class="content">...</div>
<div class="content">...</div>
<div class="content">...</div>
<div class="copyright">...</div> <!--// Hide this one //-->
</div>
<div class="inner">
<div class="content">...</div>
<div class="content">...</div>
<div class="copyright">...</div> <!--// Hide this one too, etc. //-->
</div>
<!--// etc. //-->
</div>
All elements with class "copyright" must be hidden, with exception of the very first one.
We tried to apply this approach, but unfortunately with no success. It must be a CSS only solution. Any idea?
Thanks for your help!
In this case, each .copyright is the first and only one of its kind in .inner, so you need to select by .inner instead. If you don't need to apply any special rules to the first child, you don't need to use the approach I describe in that other question; simply use this to hide the other elements:
.inner ~ .inner .copyright {
display: none;
}
This is still the top answer on Google for "css select first occurrence of class" so adding the simple technique I found to work.
This solution doesn't specifically solve the OP but does allow you to select the first element with a class amongst siblings.
You can use a combination of the sibling and not selectors as shown in this JSFiddle
For example:
.my-class:not(.my-class ~ .my-class) {
background: red;
}
How does this work?
The sibling selector (~) selects elements which are somewhere after other elements.
So this would select every element except the first one:
.my-class ~ .my-class {
background: red;
}
We then just use the :not selector to reverse this, i.e. select only the first element.
I have only tested this on Chrome but think it should work on most modern browsers.
Try this one JSfiddle
div.inner > .copyright { display:none; }
div.inner:first-child .copyright { display:block; background:#000; }