I have a div with id thdiv with the help of that id. I need to apply css properties over div with id fdiv
I tried this but not able to get the desired result
<div id="fdiv">
Hello
<div id="sdiv">
Anchor
</div>
<div id="thdiv">
Hii
</div>
</div>
div >div {
color:red;
}
If I am not specifying any id then it should change the color of both the child divs. but I need to change the properties of parent div instead of child div.
It is not possible to address the parent of an element only with CSS selectors. You would need some javascript to find the parent of an element.
you can use jquery
$('#thdiv').parent().css({"color":"red"});
Related
Is it possible to add styles to parent element if child element has not selected class?
<style>
.parent:not(.parent > .child){
color: red;
}
</style>
<div class="parent">Heading<span>1</span><div>
<div class="parent">Heading<span class="child">2</span><div>
No, CSS (and LESS) work from top to bottom and you cannot traverse back up the tree. This means that a child cannot dictate the styling of a parent.
You would have to define a class or id in the parent. For example:
<div class="parent modified-behaviour">Heading<span class="child">2</span><div>
LESS compiles to CSS and thus also lacks a parent selector.
With jQuery you can achieve it -
$(document).ready(function(){
$("div:not('.child')").parent(".parent").css("color","red");});
.parent() is for immediate parent and use .parents(), if it is a grand parent or
great-great-grand parent.
How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div>
<div id=4>
<div><span>CHANGE HERE</span></div>
</div>
</div>
</div>
</div>
</div>
If you want to change the style of your div you could do the following:
#4>div{
}
this means you will apply the class on the child divs of div with id=4.
But you cannot change its value with the use off css. Use js instead.
Also, please change the id's of your divs so it won't be confusing.
Can be accessed by following the DOM tree
For your code
div's can be access like
body div{ }- select the first div tag
body div div{ }- select the second div taglikewise it goes by the tree structure
For accessing the last div and span-> body div div div div div span{ } can be used
By this way you can select and use the tag without specifying the id or class
Check the css pseudo code for more
I want to find how to select the .if-first-child element that's the first element of a specific parent, which in this case is <div>.
<div class="no-css">
<p class="if-first-child">The style will only take effect here!</p>
<p>No style here..</p>
<p class="if-first-child">No style here..</p>
</div>
<div class="no-css">
<nav>
<p class="if-first-child">No style here..</p>
</nav>
</div>
In other words, e.g. I want to apply background-color: black; in the .if-first-child only if it's the first child of <div>.
Keep note that the div p:first-child selector will still select the .if-first-child element even though it have a <nav> parent.
Unintended, I found how to select the target when I'm exposing in the question that the div p:first-child selector will still select the p:first-child element if it have a <div> grandparent.
div > .if-first-child:first-child {
background-color: black;
}
That will only target the first-child .if-first-child which is a direct child of <div>. It will not target a grandchild .if-first-child:first-child.
In simple, you can try this as well...
.if-first-child{color:red}
div .if-first-child{color:green}
It will target only first child to change the color of the text and rest will apply default text color.
What I'm trying to achieve sounds really simple, but is not. I don't even know if I can accomplish what I'm trying todo.
Ok so we got our element with the classname .parent, .parent got two div children, one is immediate and the other one is put into the first one like so:
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
Targeting the first child should be as simple as:
.parent > div {
color: green;
}
but it isn't, as "Second child" also get affected.
Is this achieveable?
Sidenote:
Some CSS-properties like "color" is inheriting from parents, even though the element does not got the direct style. I guess this is what causing the issue. But still, I don't want it to cascade.
Parent element color is inherited to children element. First set div color and then use direct children's color:
.parent div{
color: #000;
}
.parent > div {
color: green;
}
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
The css is in cascade so the changes you do to an element effect the children. You could, however put a css class to the second child to override the css.
When you use div > p it means that Selects all p elements where the parent is a div element
But if you set one element with a property, all children will inherit that property if you don't override it. For example:
<div class="parent">
<div>First child
<div>Second child</div>
</div>
</div>
In your case, all divs will have the property color:green by inheritance. If you want to change the property of the second div you have to do the following: div.parent div div { color: red }. This means Select all div which parent is a div which parent is a div with class "parent".
This is how stylesheets work.
No, you can't.
CSS color property is Inherited by default.
It's not possible to do it in the way you want.
But more important: It's not an ISSUE, it's the way that supposed to be.
Remember: CSS => Cascade Style Sheet.
Now, for your question... the simple, easy and the right way to "solve" this... is the one that already told you #Bhojendra Nepal in his previous answer.
Edit:
Another option would be wrapping that flying text in a span tag.. or similar:
.parent > div > span {
color: green;
}
<div class="parent">
<div>
<span>First child</span>
<div>
<span>Second child</span>
</div>
</div>
</div>
I wanted to give all of the child's div elements a background-color of parent div. But, as I see, child divs' style overwrite parent's style even though child's did not have that property. For example,
<!-- Parent's div -->
<div style="background-color:#ADADAD;">
some codes here...
<!-- child's div -->
<div style="position:absolute;font-size:12px; left:600px;top:100px;">
again some codes...
</div>
</div>
In here, If i delete the style of child div, it works fine. I think my problem may be solved if i did the same thing with external css file also. But, I have already done hundreds of divs exactly like this. So, is there anyway to force parent's style to child style, just for background-color?(new in css)
But, as i see, chid divs' style overwrite parent's style even though child's did not have that property.
No, they just don't inherit the value by default, so they get whatever value they would otherwise have (which is usually transparent).
You can (in theory) get what you want with background-color: inherit. That has problems in older versions of IE though.
Use css selectors like this to make the background of child div's inherit from their parent:
Parent's div
<div id="thisparticulardiv">
some codes here...
child's div
<div class="childrendiv">
again some codes...
</div></div>
CSS:
#thisparticulardiv {
background-color:#ADADAD;
...
}
#thisparticulardiv div {
background: inherit;
position:absolute;
font-size:12px;
left:600px;
top:100px;
}
Use the inherit property on the child div :
background:inherit
<div style="position:absolute;font-size:12px; left:600px;top:100px; background:inherit">