I have the following HTML which works:
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
And the following CSS (which works):
.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}
If I add a new <div id="newID"> around the HTML, how do I update the CSS to work with the new ID wrapper?
Also, how do I use multiple IDs in the CSS to avoid re-writing this for each ID?
Thanks
If you need the style to be applied only to the elements that are children to the new wrapper, then you can just add the ID selector like this:
#newID .preview:hover > h2 {display: none;}
Otherwise you don't need to change anything.
Is that what you looking for?
<div id="newID">
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
</div>
your css:
#newID .preview:hover > h2 {display: none;}
#newID .preview:hover > p {display: block;}
Use class for styling multiple elements with the same style:
.yourClass:hover {}
I didn't fully understand what you're looking for, but if you are trying to apply the css to newly added divs then you can try this
<html><head>
<style>
.preview { border: 1px solid black;width:200px}
.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}
</style>
<script src=path/to/jquery.js></script>
</head><body>
<button class=plus>Add</button>
<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>
<script>
// Button Adds a new div with the class 'preview'
$('button.plus').click(function () {
var new_id = '<div id="newID" class=preview>New Div <br/> <h2>Some heading</h2> <p>Some text</p></div>';
$('body').append(new_id);
});
</script>
</body></html>
If your ID use same structure, for example #newid-x, #newid-y, #newid-z, you can write you css rule targeting all ID start with newid-
div[id^='newid-']:hover > h2, div[id*=' newid-']:hover >h2 {
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'm trying to target the class, .textbox-fill to change the background colour and text colour for each individual box element. For example .textbox-fill's first-child should be grey. The second-child should be white. The third child I want to adjust the height slight and so on.
I have tried using the nth-child selector #About-Container .about-inner-content article:nth-child(1n+2) .textbox-fill nothing seems to work. Example here
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
I have encounter this issue in the past and I'm not 100% sure how I resolved it. I have read several articles and posts on this subject. I understand the basics, however something more complex like this I always approached with trial and error method.
Does anyone know how I can solve this issue?
Since your .textbox-fill is inside the article, it is the article you need to start with, as target the text-fill using nth-child will not work as it can't see outside its parent
So do like this instead
article:nth-child(1) .textbox-fill {
color: red;
}
article:nth-child(2) .textbox-fill {
color: lime;
}
article:nth-child(3) .textbox-fill {
color: blue;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If we talk about the .textbox-fill's .about-textbox's children, the h2 and p, do like this, where you use the global selector * in *:nth-child, as the children is of different types
.textbox-fill .about-textbox *:nth-child(1) {
color: red;
}
.textbox-fill .about-textbox *:nth-child(2) {
color: lime;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If you have a .textbox-fill with several children, like:
div.textbox-fill
h1#header
div#firstDiv
div#secondDiv
article#someArticle
div#thirdDiv
Now, .textbox-fill div:first-child will target nothing, because there isn't any div that is a first child of it's parent (.textbox-fill). Although .textbox-fill div:first-of-type will target div#firstDiv. .textbox-fill div:nth-child(2) will also target div#firstDiv. div#thirdDiv will be .textbox-fill div:nth-of-type(3) or .textbox-fill div:nth-child(5) or .textbox-fill div:last-child or .textbox-fill div:last-of-type.
If you want to target specific .textbox-fill located on site, but with different parents, like:
div.something
div.textbox-fill
[...]
article#other
div.textbox-fill
You cannot target it using nth-child nor nth-of-type. You will need to find another way based on your site tree.
I want the following:
======
=img1= Text
======
======
=img2= Some more Text
======
Current HTML:
<div id="divison-id">
<img src="images/img1.png">
<p>Text</p>
<img src="images/img2.png">
<p>Some more text</p>
</div>
When I add the following CSS rule:
#division-id p {
display: in-line
}
I get this:
====== ======
=img1= Text =img2= Some more Text
====== ======
Why is this happening and what would be the correct way to solve this?
If you can change the HTML a bit, try wrapping the <p> and <img /> inside another <div> or something like this:
#divison-id p {
display: inline;
}
<div id="divison-id">
<div>
<img src="images/img1.png">
<p>Text</p>
</div>
<div>
<img src="images/img2.png">
<p>Some more text</p>
</div>
</div>
And note, there are two errors:
There's no display: in-line.
The selector is wrong.
Try this:
Add <br> tag after each <p> tag. Like this:
<div id="divison-id">
<img src="images/img1.png"
<p>Text goes right</p><br/>
<img src="images/img2.png"
<p>Some more text</p><br/>
</div>
CSS:
#divison-id p{ display:inline; vertical-align:top}
Try this
I added <div class='item'> to wrap each image and text
<div id="division-id">
<div class='item'>
<a href="[href]">
<img src="images/img1.png">
</a>
<p>Text</p>
</div>
<div class='item'>
<a href="[href]">
<img src="images/img2.png">
</a>
<p>Some more text</p>
</div>
</div>
<style>
#division-id p {
display: inline
}
</style>
Hope it helps
I prefer to use lis instead of divs and brs, because you don't need to style anything extra.
ul {
list-style: none;
margin: 0;
}
ul li a {
display: inline-block;
float: left;
margin-right: 10px;
}
<ul id="division-id">
<li>
<img src="images/img1.png">
<p>Text</p>
</li>
<li>
<img src="images/img2.png">
<p>Some more text</p>
</li>
</ul>
#division-id p:after
{
content: '';
display: block;
clear: both;
}
you could try this. I personally suggest that you do not use float:left cuz it will limit your styling in terms of height and width.
<style type="text/css">
.division_id div, .division_id>div>p{
display:inline-block;
}
.division_id>div>a{
vertical-align:middle;
}
</style>
<html>
<div class="division_id">
<div>
<img src="images/img1.png">
<p>Text</p>
</div>
<div>
<img src="images/img2.png">
<p>Some more text</p>
</div>
</div>
</html>
I have an HTML file that boils down to
<div class="grid">
<a> <div class="logoContainer"> <img> <p> </p> </div> </a>
<a> <div class="logoContainer"> <img> <p> </p> </div> </a>
<a> <div class="logoContainer"> <img> <p> </p> </div> </a>
<!--which is the same as-->
<a>
<div class="logoContainer">
<img>
<p>
</p>
</div>
</a>
</div>
I need to select the first .logoContainer, but because they are all children of the anchor wrapped around them, I can't use :first-child.
Is it possible to select only the first .logoContainer from .grid?
Demo
.grid a:first-child .logoContainer {
color: green;
}
or you can also do
.grid a:nth-child(1) .logoContainer {
color: green;
}
Read this for more information on child and siblings selectors
.grid a:first-child .logoContainer { ... }
This means select the logoContainer inside the first a of .grid. I hope it helps!
you test
.grid > a:first-child > div > img{border:1px solid red;}