Here is my html code ,
<div class="parent">
</div>
I am adding one div inside the parent div on runtime, It would be like this ,
<div class="parent">
<div class='child'>
</div>
</div>
Is there is any way to add style to child div using parent div ? Means can I do something like ,
<div class="parent" style="SET LEFT MARGIN FOR CHILD ELEMENT ">
</div>
So when child is added to parent div , the style will be automatically applied to child.
Based on specification — no, you can't.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515
You can't do this directly with inline css on parent div. But you can inherit styles from parent div like this:
CSS:
.child {
margin-left: inherit;
}
HTML:
<div class="parent" style="margin-left: 15px;">
<div class="child"> ... </div>
</div>
You can enclose the .child tags with i.e. < span > or < div > in this case, then set the inline CSS for the .parent tags, and then use "inherit" on the .child tag.
<div class="parent" style="color:yellow;">
<div class="child" style="color:inherit;">
</div>
</div>
The same was a successful solution applied to a similar problem I was facing regarding how the emails or links appeared inside a Gmail message body.
<div>
Hello <span style="color:yellow;">SomeMail#gmail.com</span>, we have just posted this on our website:
<br/>
Page Title of Website
</div>
I hope this offers a solution to your situation or at least inspires you closer to your preferred remedy.
Using the > for direct children:
.parent > div {
margin-left: 30px;
}
You can use this
<div class="parent">
<div class='child'>
</div>
</div>
CSS
.parent >.child {
margin-left: 30px;
}
Related
I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!
In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.
Currently working on a interesting problem where I have the current html structure:
<div class='parents-parent'>
<div class='parent'>
<div style='width: 50%'></div>
</div>
<div class='parent'>
<div style='width: 25%'></div>
</div>
<div class='parent'>
<div style='width: 25%'></div>
</div>
</div>
The parent div's are being populated via Angular UI Router and each view/partial has it's own independent width. The 'parent' divs act purely as a dynamic container so they have no width set as this is controlled by the child. However, because of this the percentage width does not work on the child elements.
Is it possible to allow a child element to have a percentage width of the 'parents-parent' div?
Styles cannot affect anything other than an element, or it's children. And there are currently no selectors to allow modification of parent elements.
I found a solution by trying, but it involves not having any spaces or linebreaks between the DIV elements in the code (i.e. the whole HTML code in * one* line): Make parent an inline-element and the parents children inline-blocks. It's not completely logical, and it might not work on every browser, but at least here (on Firefox Mac) it works...
html,
body {
margin: 0;
}
.parent {
display: inline;
}
.parent>div {
display: inline-block;
}
<div class='parents-parent'><div class='parent'><div style='width: 50%;background:green;'>A</div></div><div class='parent'><div style='width: 25%;background:red;'>B</div></div><div class='parent'><div style='width: 25%;background:blue;'>C</div></div></div>
I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle
I'm aware of the ':last-child' pseudo selector in CSS, but what I want to do is remove the margin-bottom from the last child of each 'last' element in the div.
For example:
<div id="box1" class="box">
<div class="input-group"></div>
<div class="input-group"></div>
<div class="input-group"></div>
</div>
<div id="box2" class="box">
<div class="input-group"></div>
<div class="input-group"></div>
<div class="input-group"></div>
</div>
So what I want to happen, is for each .box, I want the last .input-group to have no margin?
Now obviously :last-child will remove the margin-bottom from the immediate-last child of .input-group, but I want it to recognise when it's the last child of each .box, I'm not sure if I'm making sense here or not.
If that isn't possible, what other ways around it are there?
Cheers!
Mark
.input-group:last-child should work without any changes.
.input-group:last-child{
margin-bottom: 0px;
}
JS Fiddle: http://jsfiddle.net/F7W8p/2/
If you have other .input-group elements outside of box you can add .box to the selector:
.box .input-group:last-child{
margin-bottom: 0px;
}
Here is an example showing the selector in action: http://jsfiddle.net/F7W8p/3/
Try this
in your css document.
.box > .input-group:last-child {margin:0;}