Can I apply the first-child and last-child pseudo elements to the divs with the same class that are in different sub-containers? In the example below, div with the classes "box selected" are all stored under "1st-container", but there are 2 additional containers on the way:
<div class="1st-container">
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected"> // this div should have first-child pseudo elements
<div class="box">
</div>
</div>
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected">
<div class="box">
<div class="box">
<div class="box">
</div>
</div>
<div class="2nd-container">
<div class="3rd-container">
<div class="box selected"> // this div should have last-child pseudo
<div class="box">
</div>
</div>
</div>
Is that doable with pure css?
You can't do what you've described, because in both cases, "box selected" is the first child of its parent. You could take a different approach, though. For example, you could target those two divs like so:
.2nd-container:first-child .selected,
.2nd-container:last-child .selected
{}
As pointed out, replace the 2 with a non-digit, as that won't work. I was distracted by the main question. :-)
Firstly, you cannot use numbers to start classes or id's.
Secondly, you just need to do a find on the first and last child of the second element in and you should be able to find the elements you need.
.box {
height: 20px;
width: 400px;
background: blue;
}
.box.selected {
background: red;
}
.two-container:first-child .box.selected,
.two-container:last-child .box.selected {
background: green;
}
<div class="one-container">
<div class="two-container">
<div class="three-container">
<div class="box selected">// this div should have first-child pseudo elements</div>
<div class="box"></div>
</div>
</div>
<div class="two-container">
<div class="three-container">
<div class="box selected"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="two-container">
<div class="three-container">
<div class="box selected">// this div should have last-child pseudo</div>
<div class="box"></div>
</div>
</div>
</div>
with JS it looks easier than CSS:
var selected = document.querySelectorAll('.one-container .box.selected');
selected[0].style.background = selected[selected.length-1].style.background='green';
FIDDLE
Related
I have content like this:
<div class="content">
<div class="row">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
How do I select the links between h1 tags foo1 and foo2?
I have tried this:
.content .row > :not(h1) a
but this selects on:
foo11
foo12
foo21
and what I want is:
foo11
foo12
Also, the number of div.row after the rows containing h1 is variable.
You essentially have a hierarchy which is not represented in hierarchical form in your HTML. The best solution is to add another level to your HTML which represents the hierarchy.
If you can't do that, and are stuck with this HTML, then you can try with sibling combinators, but in any case, you will need some way to address the foo1 and foo2 elements. That could be a class, or nth-child if you know the order, or data attribute, or anything else. This cannot be something on the <h1> element, since CSS provides no way to go "up and over". It must be a way to address the higher-level row elements containing the h1. In the below, I'll assume you have a class available. In that case:
/* Make everything after `foo1` red. */
.foo1 ~ .row a { color: red; }
/* But make `foo2` and everything after it the original color. */
.foo2.row a, .foo2 ~ .row a { color: inherit; }
<div class="content">
<div class="row foo1">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row foo2">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
The following should work:
.content .row:not(:last-child) a {
background-color: red;
}
<div class="content">
<div class="row">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
Is this kinda what you are looking for jsfiddle
?
for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
var x=document.getElementsByTagName('a')[i];
var t=x.innerHTML;
if (t=='foo11'||t=='foo12') {
x.style.backgroundColor="red"; }
}
You can do it like this with variable div's:
.content > .first ~ .row > a {color: red}
.content > .second ~ .row > a {color: initial}
<div class="content">
<div class="row first">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
foo13
</div>
<div class="row second">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
<div class="row">
foo22
</div>
<div class="row">
foo23
</div>
</div>
Here the initial keyword sets the color property to its default value and without defining additional two classes for .row's with the h1 tag inside, this can't be done in any other way with pure CSS.
Given the following markup:
<div className="row">
<noscript></noscript>
</div>
<div className="row">
<noscript></noscript>
</div>
<div className="row">
<section></section>
</div>
<div className="row">
<section></section>
</div>
<div className="row">
<section></section>
</div>
...
There may be any number of divs at the top that contain noscript.
How can I access only the first section in the rows?
It won't be possible to achieve this using CSS only, you need to use Javascript.
Explanation:
Because :nth-of-type(1), nth-child(), :first-of-type and :first-child will always give you all the sections as they are the first child and the first of type section in their parents div.
All these selectors will only work, if you are putting all the sections inside one parent div with class="row".
JavaScript solution:
You can use document.querySelector(".row section") to get the first section in a div with class="row".
But with CSS only this won't be possible:
document.querySelector(".row section").innerHTML = "I am the first section !";
.row {
width: 200px;
height: 50px;
border: 1px solid black;
}
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<section></section>
</div>
<div class="row">
<section></section>
</div>
<div class="row">
<section></section>
</div>
Note:
Also in HTML it's class="row" and not className="row", in fact className is used in Javascript.
Alternatively to #chsdk, you could use the jQuery method of .first()
HTML:
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<section>1</section>
</div>
<div class="row">
<section>2</section>
</div>
<div class="row">
<section>3</section>
</div>
CSS
.row {
display:block;
height:50px;
width:50px;
}
section {
display:block;
height:20px;
width:20px;
}
jQuery
$('.row section').first().css('background','#111');
https://jsfiddle.net/ojuun4uh/
Using JavaScript, the getElementsByTagName method can help you. Try this:
var section = document.getElementsByTagName('section').item(0);
I have a parent DIV with 5 Child DIVs, each Child DIV has the same class and that appears to be the problem. I am trying to put a different background color for each child DIV? But something seems to be going wrong with the CSS. Thoughts?
CSS
.rsThumbsContainer:nth-child(2){
background: rgb(184,84,84);
}
HTML
<div class="rsThumbsContainer">
<div class="rsNavItem rsThumb">
<div class="rsTmb">Frugobee video</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Post a job</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Get a quote</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Make a hire</div>
</div>
<div class="rsNavItem rsThumb">
<div class="rsTmb">Pay with ease</div>
</div>
</div>
Output:
I know it can be done using ID's and JQuery.
See example.
You need set :nth-child on
<div class="rsNavItem rsThumb">
JSFIDDLE DEMO
You need to apply nth-child to the child selector, not the parent:
.rsNavItem:nth-child(2) {
background: rgb(184,84,84);
}
My HTML code:
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
Css:
.span4:nth-child(3n+1){
color: red;
}
In result there must be 1, 4, 7 red colored. But it's not.
Example: http://jsfiddle.net/473UR/
How to solve that problem?
.nth-child works with the consecutive element. If there is any other elements comes in between it starts calculating from the first.
<div class="span4">1</div> <-- this is first-child -->
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div> <-- sequence reset.
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
That's because .span12 counts as a child too. If you remove it, it will work
You need to move your banner div and it will work
EXAMPLE
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
<div class="span12">banner</div>
<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
<div class="cl"></div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
<div class="cl"></div>
</div>
Is it possible to avoid adding <div class="cl"></div> at the end of each .block?
There are two common solutions to this problem.
Add overflow: hidden to the parent of the floated elements (so in this case, .block).
Use "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/
Some more information here: Is clearfix deprecated?
A good time to use clear: both is when you already have an element available to add it to.
For instance, the common case of floated columns with a footer: http://jsfiddle.net/thirtydot/vhBkM/
you could do this:
<style>
br {clear:both;}
</style>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
a second option re: #animuson comment
<style>
.container br {clear:both;}
</style>
<div class="container">
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
</div>
You shouldn't need the <div class="cl"></div> divs at all. Just put the clear: both on the block div.
Example: http://jsfiddle.net/mKazr/
CSS
.block {
clear: both;
overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
}
.left { float:left; }
HTML
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
Edit: added code
Try using overflow:hidden on the .block I know that that sometimes will fix it.