Is there a way to choose the second inner div without changing the HTML using CSS 2 cross-browser support?
<div>
<table>
<tr>
<td>
<div></div>
<div></div>
</td>
</tr>
</table>
</div>
$("div div:nth-child(2)").css ( "CSS GOES HERE" ); // index starts from 1
$("div div:eq(1)").css ( "CSS GOES HERE" );; // index starts from 0
This will work in all browsers regardless of the fact browser supports css3 or not.
EDIT
As mentioned the above code will work even if the browser supports only css2 , but if it is only for puzzle then
div div:first-child + div
This will affect only second div inside main div without use of css3. [ first-child is not css3 ]
try this selectors, any will work fine:
div table div { ... }
or
div table tr td div { ... }
you could use an adjacency selector
div + div
http://jsfiddle.net/kudoslabs/rysys/
reference: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
Try to use this selector
div div + div {
…
}
Demo on dabblet.com
I achieve this result with these css rules:
div {
padding: 5px;
background: yellow;
}
div div + div {
background: red;
}
if you are trying to find inner div using jquery selector then here is code that might help
var innerDiv = $('table').find('div');
and for outer
var outerDiv = $('table').parents('div');
regards.
Related
Hi I have an HTML page where I want to include CSS only if two conditions are met.
The HTML page will always have the div with id flipbook-page3-front
The HTML page will sometimes have the div with id pagesFlipbook
These divs are not siblings and are not after each other
I want to create some CSS on flipbook-page3-front only if the div pagesFlipbook is present. Is it possible. This is my CSS without any conditions:
.flipbook-page3-front{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
This will work only if you have class pagesFlipbook of parent div so it will affect.
Write conditional CSS like this.
.pagesFlipbook .flipbook-page3-front { /* write css */ }
Yes, it is possible, please see the code below...
const element = document.querySelector('#pagesFlipbook')
if(element != null){
document.querySelector('#flipbook-page3-front').classList.add('myconditionalclass')
}
You can declare in your CSS the following class to complete this...
.myconditionalclass{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
I am trying to extract the nth child of an element, so that elements appear stacked within the same container.
I've tried reading over https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child, but to no avail.
I recreated the problem in a jsfiddle,
https://jsfiddle.net/ndga732y/
html:
<table>
<td>
<p id="image-1">first content</p>
<p id="image-2">second content</p>
</td>
</table>
css:
p:nth-child(0n){
offset-x: n*2px;
offset-y: n*2px;
}
I understand that selecting the nth child is easy, using the nth-child selector, but how do I use the n-value to create a different offset, depending on its order in a container?
Thanks in advance!
This isn't possible with plain CSS unfortunately.
You can use Javascript or a CSS preprocessor (probably a postprocessor as well?).
Here is how I would approach it with Sass, which would compile to CSS:
#for $i from 1 through 2 {
p:nth-child(#{$i}) {
top: $i * 100px;
left: $i * 50px;
position: relative;
}
}
and here's a quick demo: http://www.sassmeister.com/gist/8af65851d1c404be698f
You could use padding left and do something like
p:nth-child(2){
padding-left: 50px;
}
I'm elaborating a tree structure with nested DIVs. Well, rather than "nested" I'd call them "matrioshked", since every DIV can contain dynamically generated children, grandchildren and so on, having each one its own DIV inside that of the parent.
Is there a way to alternate the background color of the elements? Of course the usual "even" and "odd" used for rows and lists can't work, and a priori I don't know how many layers there will be, so I can't declare a div div div div etc. style.
I know I can insert inside every child DIV an 1x1 image with an ONLOAD checking the color of the parent and using the alternate for the child, but I hope to find a more practical (and elegant) solution.
P.S.
I can't use JQuery for compatibility issues.
edit:
Here is, more or less, what I have to do: http://jsfiddle.net/gmw3t8rd/
This Problem may be solve is you see this site.
http://css.maxdesign.com.au/listutorial/sub_master.htm
Your description is a bit conflicting with you JSFiddle, but if I now understand what you want, you can just use CSS to apply the desired coloring.
#elenco_generi div.g0 {
background-color: #ffffdd;
}
#elenco_generi div .figli div .figli div, #elenco_generi div .figli div .figli div .figli div .figli div {
background-color: #ffffff;
}
#elenco_generi div.g1, #elenco_generi div .figli div, #elenco_generi div .figli div .figli div .figli div, #elenco_generi div .figli div .figli div .figli div .figli div .figli div {
background-color: #ddddff;
}
JSFiddle: http://jsfiddle.net/hxgLpw3e/
I know the JSFiddle looks "broken" towards the bottom, but that's because you seemed to stop using .figli to wrap your divs. It's always a good idea to have a fixed structure on how content will be layered. Trading off just complicates things.
Basically, you use the wrapper div ID as your starting point, and just add a level each time. If this isn't want you are looking for, could you try re-explaining it?
Assuming this is what you wanted, I highly recommend you just go with JavaScript, it's a lot cleaner to make happen with expandable content.
I don't know why this refuse to works as a fiddle, complaining the Javascript function is not defined. In Firefox I went down until there wasn't space enough for the button. Anyway here is everything, reduced at the essential.
The CSS:
div {
padding: 1em;
margin: 1em;
text-align: center;
}
.blue {
border: 3px solid blue;
background: #99f;
}
.green {
border: 3px solid green;
background: #9f9;
}
This is the Javascript snippet:
function makeChild(TheDiv) {
var nextBg = 'blue';
var thisId = TheDiv.dataset.did;
var nextId = parseInt(thisId) + 1;
if (TheDiv.dataset.bg =='blue') {
var nextBg = 'green';
}
var code = '<div class="' + nextBg + '" id="child_' + nextId + '" data-bg="' + nextBg + '" data-did="' + nextId +'">This is a child<br /><br /><input type="button" onclick="makeChild(this.parentNode)" value="OPEN ANOTHER CHILD" /><div id="sonny_' + nextId + '"></div></div>';
document.getElementById('sonny_' + thisId).innerHTML = code;
}
and this is the HTML:
<div id="main">
<div class="blue" data-bg="blue" data-did="0">
<input type="button" onclick="makeChild(this.parentNode)" value="OPEN CHILD" />
<div id="sonny_0"></div>
</div>
</div>
This makes exactly what I want: nested DIVs with alternate colors.
I hope this small trick will be helpful to someone else!
How to get the text field with auto extend based on the browser width (with pure css). For example if I scale the browser to minimum width also the text field should not jump to the second line.
I need exactly like how it is shown in this image
Not 100% sure it's the desired effect but for some browsers this might be what you're looking for:
html:
<p>
<label>Test</label>
<span><input></span>
</p>
And css:
label{width:200px;float:left;}
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;}
input{width:100%;box-sizing:border-box;}
Example: http://jsfiddle.net/48fNt/ (works in at least chrome)
Maybe you also still need to play around with white-space:nowrap and a min-width.
You can't do it alone with CSS. Use
jQuery AutoResize Plugin
$('#myTextBox').autoResize({
onResize : function() {
//Do something on resize
},
animateCallback : function() {
//Do something after resize
},
animateDuration : 300,//Duration
extraSpace : 40//Extra Space
});
As far as I can know, you cannot do it with only CSS for inputs, but you can emulate this behaviour using a div with contenteditable attribute - demo http://dabblet.com/gist/3150040
HTML
<div contenteditable></div>
CSS
div {
min-width: 150px;
width: auto;
border: solid 1px #ccc;
display: inline-block;
}
there are more than one ways you can achieve this position
http://jsfiddle.net/rHqE7/4/
<div id="wrap">
<div id="name">Name</div>
<input type="text" name="fname" id="text" />
</div>
#wrap{width:500px;overflow:auto;}
#name{float:left;width:100px;font-size:16pt;padding:10px 5px;}
#text{float:left;min-width:300px;max-height:20px;border:1px solid black;padding:3px;}
Sample HTML code:
<table>
<tr>
<td class="a b">
Sample CSS file:
.a
{
background-image:url(a.png);
}
.b
{
background-image:url(b.png);
}
It seems like the "b" part is ignored.
Is there any way to inlclude both images in the same cell, even using other technique?
Now you can do with CSS3. http://www.zenelements.com/blog/css3-background-images/
#my_CSS3_id {
background: url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
}
You could do this:
<td class="a"><div class="b">...</div></td>
Then the td will have the first background, and the div inside it will have the second. If one is transparent, the other will show through. I think b.png will be on top, but I'm not sure about that.
It's an intriguing idea, but think about how other properties work, such as color.
.a { color: red; }
.b { color: blue; }
How could the text be both red and blue? In this case, blue wins the tiebreaker, because it's specified later.
There may be another way, if you can create an image ab.png that is the result of combining of a.png and b.png.
.a { background-image(a.png) }
.b { background-image(b.png) }
.a.b { background-image(ab.png) }
Caveat: It doesn't work in IE6.
No, every declaration of background-image will replace/ override the previous one for a given element. You'll need to nest an element for every additional background you want to apply. If you're trying to apply a fancy border to an element, there are some new border properties in CSS3, but they're not widely supported.
something like this could work:
<table>
<tr>
<td class="a">
<div class="b">
and the css:
.a
{
background: url(a.png) top left no-repeat;
}
.b
{
background: url(b.png) top right no-repeat;
}
set the div wide enough and you'll see one image floating in the top left and the other in the top right
You can't have both images as a bg image for a cell. You need to make 2 cell or put the images as <img ... /> tags inside the cell. Also some browers have issues reading class="a b c" class definitions.