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.
}
Related
how can I place many paragraphs or div elements next to each other, that I see no difference between them? For example:
<div>
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
They are placed under each other, but I want them to be side by side, and please don't write me other ways, for example something like: 'you can write the text in one div'... :) I saw this question several times from other users, but they had a bit different problem like mine, so please answer me this question
Thanks
<div>
<span>hey, how ar</span>
<span> you?</span>
</div>
or
.text {
display: inline-block;
}
<div>
<div class="text">hey, how are</div>
<div class="text"> you?</div>
</div>
or
.container {
display: flex;
}
<div class="container">
<div>hey, how are</div>
<div> you?</div>
</div>
div is a block-level element, which means that it will take up the whole of a 'row' on the screen, unlike inline elements.
I'd suggest you have a read through of the MDN pages on these two categories to get a better understanding of this:
Block-level elements
Inline elements
Among the many ways of solving this (change divs to an inline element type like span, using flexbox, etc), one option is to force your div to be inline by changing their CSS:
.text1, .text2 {
display: inline-block;
}
You can do this in many ways. Here I'll be showing classic ways to do this.
using display:inline-block property of css.
.text1{
display:inline-block;
}
.text2{
display:inline-block;
}
using display:flex property of css.
html:
<div class="text-wrapper">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
css:
.text-wrapper{
display: flex;
}
There are several ways of accomplishing this. You could do it with CSS Flexbox, CSS Grid, CSS float, or you could change the display property on the DIV's.
As you have tagged your question with "Angular", it is very common to use the Angular Flex Layout package for positioning (https://github.com/angular/flex-layout). If you add this package to your project, you could solve it like this:
<div fxLayout="row" fxLayoutAlign="start">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
Why don't you use bootsrap? This is a typical scenario for placing things side by side.
<div class="d-flex justify-content-center">
<p></p>
<p></p>
<p></p>
</div>
So, I have a collection of div as following for My Page.
<div class="My_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
Then I have another page with same class= one and two.
<div class="Your_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
However, I am trying to apply different css to class= one and two based on what page they are in.
For example:
My_page:
.My_Page .one{width:100%;}
Your_Page:
.Your_Page .one{width:50%}
I have one css file which contains both codes.
For either pages, these two css markups are loaded and I feel like there must be more efficient ways to apply different css based on what parental div it is in.
Or am I doing it right?
Thanks
.page{ .... //common css for both page one and two}
.page .one{ width:100% .... //common for both }
.page .two{ .... //common for both }
.My_page .two{ width:50%;}
<div class="page My_page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
You are doing it correctly, CSS is very lightweight and loading unused code is not overly bad. However if you feel the need to do so you could load page specific CSS files and then have a whole site file that is loaded for all pages.
You are doing it correctly -
.outerclass .innerclass { }
will apply the style changes to all instances of this specific scenario.
Since your outer div has a different class, you could use a child selector to do something like this:
.My_Page .one {
color: red;
}
.Your_Page .one {
color: blue;
}
In that example, elements with the class one would only be red if they were inside a parent element with a class of My_Page.
Edit after re-reading the question:
Now I see that you seem to already be doing this. Yes, that is fine. You're doing it right. You could also include a different style sheet on each page if you're very concerned about the size of the style sheet. But that's not really necessary in most cases.
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'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;
}
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/