I have a parent div like this
<div class="parent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
I want to add a div after div.parent
<div class="parent">
<div class="subparent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
How can I do like this.
How can I do like this.
try:
$('<div class="subparent">').append($('.parent').children())
.appendTo('.parent')
console.log($('.parent').html())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Related
What do i have to write to my css code to select .formlabel class within formblock2, for example to change the color of Heading B to green instead of red?
.formlabel {color:red;}
<div class="form">
<div class="formblock1">
<div class="formlabel">Heading A
</div>
</div>
<div class="formblock2">
<div class="formlabel">Heading B
</div>
</div>
<div class="formblock3">
<div class="formlabel">Heading C
</div>
</div>
</div>
you can call the parent of it then call the div that you want like this.
.formlabel {color:red;}
.formblock2 > .formlabel {color: green;}
<div class="form">
<div class="formblock1">
<div class="formlabel">Heading A
</div>
</div>
<div class="formblock2">
<div class="formlabel">Heading B
</div>
</div>
<div class="formblock3">
<div class="formlabel">Heading C
</div>
</div>
</div>
I am trying to achieve something like this
<div class="parent">
<div class="child">
<div class="item"> <!-- select this -->
<div class="item"> <!-- not this -->
</div>
</div>
</div>
</div>
I have tried using first-child like this -
.parent .child .item:first-child p {
background: red;
}
<div class="parent">
<div class="child">
<div class="item"> <!-- select this -->
<p>This should be changed</p>
<div class="item"> <!-- not this -->
<p>This should NOT be changed</p>
</div>
</div>
</div>
</div>
But it didn't work. Is there any pure CSS way of doing it?
You're probably looking for the child combinator:
.parent .child > .item > p {
background: red;
}
<div class="parent">
<div class="child">
<div class="item"> <!-- select this -->
<p>This should be changed</p>
<div class="item"> <!-- not this -->
<p>This should NOT be changed</p>
</div>
</div>
</div>
.parent .child .item:first-child > p {
background: red;
}
<div class="parent">
<div class="child">
<div class="item"> <!-- select this -->
<p>This should be changed</p>
<div class="item"> <!-- not this -->
<p>This should NOT be changed</p>
</div>
</div>
</div>
</div>
You can also use the :first-of-type pseudo-class.
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
Here you're selecting the first div, and then, the first p element.
.parent > .child > .item:first-of-type > p:first-of-type {
background: red;
}
<div class="parent">
<div class="child">
<div class="item"> <!-- select this -->
<p>This should be changed</p>
<div class="item"> <!-- not this -->
<p>This should NOT be changed</p>
</div>
</div>
</div>
</div>
How do I access span values
/// with this I can access but I want to access all span values can anyone
help p = summaryContainer.parentElement.firstElementChild;
<div class="col-50">
<div id ="orderSummary">
<h2>Order summary</h2>
<div class ="summary-container">
<div class ="summary">
<div class="product">
<span>Natural Straight</span>
<div class="price">$95,00</div>
<div class="quantity">
<span>1</span>
</div>
<div class="total">$95,00 </div>
</div>
</div>
</div>
It should works fine
let summaryContainer = document.getElementsByClassName('summary-container')[0];
let spans = summaryContainer.getElementsByTagName("span");
let content = Array.prototype.slice.call(spans).map(span => span.innerText)
console.log(content)
<div class="col-50">
<div id ="orderSummary">
<h2>Order summary</h2>
<div class ="summary-container">
<div class ="summary">
<div class="product">
<span>Natural Straight</span>
<div class="price">$95,00</div>
<div class="quantity">
<span>1</span>
</div>
<div class="total">$95,00 </div>
</div>
</div>
</div>
I'm having problems clearing some overflow between left and right floats.
My overflow goes down deep into the first parent div and I just want it to clear into the next line on the next parent div. Here is my simplified version of my code:
<div>
<div style='float:left; display:block;'>
<div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:red; clear:right'>
<div style='width:300px; position:relative; display: block; clear: both'>
asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
</div>
</div>
<div style='float;right;'>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
</div>
</div>
My above example has text overlapping in the same line as the red box. How do I make the overlapping float right text drop down to the next blue box?
To answer your question easily:
your text inside the red box will always be in the red box, because is its container. So...
You put a widht limit, and the content is bigger than the container. This is known as overflow.
You can make the red box grow, or dealing with overflow with CSS overflow property: w3schools.com/cssref/pr_pos_overflow.asp
If you want to keep your width limit on your divs, you can add a blank div to match the overflowing first col div:
<div>
<div style='float:left; display:block;'>
<div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:red; clear:right'>
<div style='width:300px; clear: both'>
asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
</div>
</div>
<div style='float;right;'>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
<br>
</div>
<div>
asdfasdfasdf
</div>
</div>
</div>
I'm trying to get the horizontal grey lines to sit in front of the red background but behind the blue buttons. I've tried using z-index but I think it fails because the nested divs need to be placed in front of a div outside their containers.
Any help would be appreciated
http://jsfiddle.net/LZxxB/1/
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content" id="contentDiv">
<div class="fretboardWrapper">
<div class="strings">
<div class="string" id="stringHighE"></div>
<div class="string" id="stringB"></div>
<div class="string" id="stringG"></div>
<div class="string" id="stringD"></div>
<div class="string" id="stringA"></div>
<div class="string" id="stringLowE"></div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
You were right to use z-index. But z-index only works for elements with position: relative, absolute or fixed.
I've set:
.string {
position: relative;
z-index: 2;
}
.round-button {
position: relative;
z-index: 3;
}
And removed the z-index from .stringTitle.
And it works
http://jsfiddle.net/LZxxB/2/
try this:
add position and z-index here:
.noteClickArea {
height:16.66%;
z-index:2;
position:relative;
}
and remove z-index here:
.stringTitle {
z-index:1; // REMOVE IT
}
see results here: http://jsfiddle.net/LZxxB/4/
My advice is to not touch z-indexing; Use html's implicit layer indexing;
I believe it behaves such that the first child element is topmost and the last element is bottom most, then leverage nesting. (I could have it backwards, it might be that the last element is rendered topmost)
This works best for be when using any sort of positioning, as the position can be specified independent of any z indexing, and element order can be manipulated by javascript if need be. (Assuming you anticipate using JavaScript at all)