I have the following structure:
<div id="e1">
<h1>Header</h1>
<div id="main">text text text text</div>
<div id="footer">something</div>
</div>
And I want the <h1> to turn blue for example when the footer is hovered. I know I can do it with Javascript but I was wondering If you might know some CSS trick to do it without.
Thanks!
Your h1 comes before #footer, so it's not possible with pure CSS as it doesn't provide a selector to match the preceding sibling element.
#e1:hover {
color:red;
}
#main, #footer{
color:black
}
Another option.
I've implemented it in a way, not changing html structure, and pure CSS.
see it in jsfiddle: http://jsfiddle.net/ijse/dhcqw/
Related
I'm trying to learn HTML and CSS and I've came across the following question.
I need to insert a vertical gap between the elements of the site::
To be like that:
But I have no idea to get it done without using a lot of <br>.
Can someone help me to get this done?
Thanks so much!
Just add a margin to your html element that contains your 'Header' text, and some margins to the button.
This is a good resource for that: https://www.w3schools.com/css/css_margin.asp
you can also insert in a line break with the br tag
<br>
gap style property is for display: flex, but you can use margin-bottom for this, here is an example.
HTML
<div>
<div class="header">
<h2>Header</h2>
</div>
<h1>Header</h1>
<div>
CSS
.header {
margin-bottom: 50px;
}
I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}
I have elements of a given secondclass with grey background and I would like only even elements of this class with a red background. I can't use nth-child() selector because these elements might not be the only inside parent.
I've tried the following:
.secondclass {
background-color:#aaa;
}
.secondclass:nth-of-type(2n+1) {
background-color:red;
}
This works fine until I put an element of the same type of secondclass inside parent (i.e. a div). This is reasonable, since nth-of-type() refers to the type not the class:
<div>some text</div>
<div class="secondclass"></div>
<div class="secondclass"></div>
Fiddle
Is there a pure-CSS way to select only even elements of secondclass subset, independently from their type?
Why not just make 2 classes for the even and uneven and just assign these classes where it is necessary? Otherwise trying to figure out how to make a logic check within CSS seems a very long detour to the same result.
The class for "even" elements will have red background and "uneven" will have grey background.
.uneven {
background-color:#aaa;
}
.even {
background-color:red;
}
And the divs:
<div>some text</div>
<div class="uneven"></div>
<div class="even"></div>
Only one way which I see is use different HTML tag.
Like:
<div>some text</div>
<span class="secondclass"></span>
<span class="secondclass"></span>
Demo:
JS fiddle
But there is no pure CSS solution
Trying to only color certain every other div of class 'story':
<div class="wrap-well">
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
</div>
CSS:
.wrap-well div.story:nth-child(even) {
background-color:#ff00ff;
}
Fiddle:
http://jsfiddle.net/NF2dk/
But it seems that 'clearfix' columns are also counted...
#Marcin and #Explosion Pills is absolutely right here, but as I inspected your DOM, you've a consistent pattern going on there, you can use Adjacent selector to achieve this rather than using nth-child or nth-of-type
.wrap-well div.story + div.story {
background-color:#ff00ff;
}
Demo
This way, it will just do the job what you wanted to achieve, also it's much more compatible compared to nth pseudos
nth-child does not work with the selector, but the element. It selects each even div regardless of the composition of the selector.
You can use nth-of-type to only select <div> elements and use another element such as <br> for the clearfix.
http://jsfiddle.net/NF2dk/1/
There is nothing like nth-of-class() selector.
The closest you can get is nth-of-type(). But it will look at the element tag, not class assigned to the element.
I'm trying to show a hidden div on hover of its parent.
My issue is that there are nested divs of the same class, and when I hover an "inner" div, its parent is also hovered and both their hidden children are shown.
html:
<div class="a_class">
lorem ipsum
<div class="inner">
hidden...
</div>
<div class="b_class">
blahblah<br />
<div class="a_class">
<div class="inner">
hidden...
</div>
lorem ipsum
</div>
</div>
</div>
css:
.inner{display:none;}
.a_class:hover > .inner{display: block;}
fiddle: http://jsfiddle.net/Nb6tD/
In other words, i'm trying to achieve this: when i hover over the second .a_class, only the .inner under it should show up, not the .inner under the "parent" .a_class.
Is it possible only with css?
Thanks in advance
EDIT: the answer
So, it appears it CAN'T be done with pure css, unless the html markup changes - which is not possible in my case.
I wished for a css3-magic solution, but since there's no such option, i'm going javascript.
I accepted the most suitable solution though for future reference, for all out there that have the possibility of changing the html structure.
I don't think you can "fix" this without changing the html structure - you could have an element enclosing the hoverable area and its corresponding button:
Here, i've added a .hoverArea div. (Extra div not needed on the innermost one, as it only contains a single .inner)
html
<div class="a_class">
<div class="hoverArea">
lorem ipsum
<div class="inner">
hidden...
</div>
</div>
<div class="b_class">
blahblah<br />
<div class="a_class hoverArea">
<div class="inner">
hidden...
</div>
lorem ipsum
</div>
</div>
</div>
css
.hoverArea:hover > .inner{
display: block;
}
Demo at http://jsfiddle.net/Nb6tD/7/
It is not possible with pure css because you are hovering on the parent element as well as the .a_class child element then ofcourse it will show you both the blocks.
If you can change the html to some extent then it can be achieved easily.
The changes I have done to html are:
I wrapped the complete html code in .block class element.
closed the parent .a_class before starting of the .b_class element.
CSS
.block, .block .b_class>.a_class {
border: 1px solid red;
padding: 15px;
}
Working fiddle
The problem is that as the second set are nested inside the first .a_class, in effect the first .a_class is still being hovered over when you hover over the second .a_class.
So at that time both elements are interpreted as being hovered, which will trigger the behaviour that is happening.
In this way? (needs some HTML changes)
http://jsfiddle.net/Nb6tD/6/
i {
display: none;
}
.trick:hover > i {
display: inline;
}
It Works for me
You just need to point or access exact tag or class in inner child where you want to apply your css
e.g:
.footer-custom-icons li:hover > .iconlist-item-icon i,
.footer-custom-icons li:hover > .iconlist-item-content p a
{
color: white !important;
}