here is my HTML code:
<div id="main">
<h1>
<div class="details-of-family-members">Details of Family Members</div>
</h1>
<div class="wrap data">
<h1> Hello</h1>
</div>
</div>
Here is my CSS to hide .wrap.data div based on div of class .details-of-family-members which is inside h1.
In CSS3 there isn't a option to select the parent based on the child.
We got this sittuation: h1 is sibling of .wrap.data, not details-of-family-members.
Therefore, you should add the class details-of-family-members to h1 tag. And then you can:
.details-of-family-members + .wrap.data {
display:none;
}
.details-of-family-members + .wrap.data{
display:none;
}
<div id="main">
<h1 class="details-of-family-members">
<div>Details of Family Members</div>
</h1>
<div class="wrap data">
<h1> Hello</h1>
</div>
</div>
Try this and you cannot target parent node based on child by css
#main h1:hover + .wrap.data {display:none;}
Related
Basically I want to style a p tag when it is not present inside another div.
For example
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
</div>
</div>
I tried the following but no luck
.container > :not(.secondClass) + p {
color: red;
}
Tou can change the style like this :
div > :not(.secondClass) > p {
color: red;
}
There are several ways you can do this, depending on context. See code below:
.container .row > p {
background: red;
}
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
<p>I want to style here</p>
</div>
</div>
,
Is it possible to select a specific <div> when another <div> which is not a parent is :hover?
All that in HTML5/CSS3 only, without JS.
<section>
<div id=first></div>
</section>
<section>
<div class=second></div>
</section>
As an example, i want <div class=second> to show when <div id=first> is :hover.
This is possible, but only if the two elements have the same parent.
Using the element1 ~ element2 selector. For example:
HTML:
<div class="first">
<!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
<!-- content -->
</div>
CSS:
.first:hover ~ .second {
/* styles */
}
If you need to select an element that does not have the same parent, you need to use javascript.
this is two ways to achive that, with click adding an a tag or with hover that its a little tricky
.second{
display:none;
}
#second:target {
display:block;
}
#first a{
text-decoration:none;
color:black;
}
.disp1:hover + .disp2{
display:block;
}
.disp2{
display:none;
}
<section>
<div id="first"><a href="#second" >div one</a></div>
</section>
<section>
<div id="second" class="second">div two</div>
</section>
<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>
I have a nested HTML element structure where I need to apply css styles for some condition.
Apply styles to class starts with "a-" in the .a-comp element
Ignore styles to .a-col class and its child elements which have "a-*" class
The code below works for the above scenario. But it doesn't work for other child elements which have "a-*" class.
How can I achieve that?
.a-comp :not(.a-col) [class^="a-"],
.a-comp :not(.a-col) [class*="a-"] {
color: red;
}
<div class="a-comp">
<div class="a-one">
<div class="a-col">
<div class="a-text">
Text1
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
Text 2
</div>
</div>
</div>
View on JSFiddle
Your selector matches .a-* elements that have an .a-comp ancestor, with some intermediate element that is not .a-col. However, both of your examples match that selector.
The first one has .a-one as a descendant of .a-comp and ancestor of a-text. The second one has .a-row as a descendant of .a-comp and ancestor of a-text.
One solution might be to set the appropriate children of .a-col elements not to be red.
.a-comp [class^="a-"] {
color: red;
}
.a-comp .a-col [class^="a-"] {
color: black;
}
<div class="a-comp">
<div class="a-row">
<div class="a-two">
<div class="a-text">
In a ROW
</div>
</div>
</div>
<div class="a-one">
<div class="a-col">
<div class="a-text">
In a COL
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
In a ROW
</div>
</div>
<div class="a-one">
<div class="a-something">
<div class="a-text">
In something else
</div>
</div>
</div>
</div>
I have the following html
<div class="post">
<h2 class="title">TITLE: Kausalya</h2>
<p class="content">CONTENT: Shaunaka Shakha</p>
</div>
<div class="post">
<h2 class="title">TITLE: Kausalya</h2>
<span class="author">AUTHOR: Ayuidasht</span>
<p class="content">CONTENT: Shaunaka Shakha</p>
</div>
I can do this with jQuery, but how can I do this with css?
$('.title').next('.content').css('margin-top','20px');
I just need a margin-top on the content if it comes after a title. i know I can do this with css but i forgot how and I cant figure out what it is called.
You are looking for the adjacent sibling combinator, +.
Example Here
.title + .content {
margin-top:20px;
}
h2 + p{
margin-top: 20px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
<!-- HTML -->
<section class="row slide">
<div class="span4">
<h1>
<span>Some</span>
<br />
<span>Title</span>
</h1>
</div>
</section>
<section class="row slide">
<div class="span4">
<h1>
<em>Some emphasis</em>
<br />
<span>Some</span>
<br />
<span>Title</span>
</h1>
</div>
</section>
<section class="row slide">
<div class="span4">
<h1>
<em>Some other emphasis</em>
<br />
<span>Some</span>
<br />
<span>Title</span>
</h1>
</div>
</section>
/* CSS */
section h1 span:first-child{
color:#FF0033;
}
I'm trying to target the first <span> in every <h1> tag that's in a <section> container but as soon as the <span> is not the first child element (like the <em>) then it's not applying the rule.
:first-child selects the first child. Use :first-of-type for your purpose:
section h1 span:first-of-type {
color: #FF0033;
}
:first-child does not reference the element to be the first child of that type, but generally to be the first child of its parent! Citing MDN on this:
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
What you need is the :first-of-type selector (MDN link) as follows:
section h1 span:first-of-type{
color:#FF0033;
}
Example fiddle.