Targeting html elements inside div using css - html

Given this HTML as an example, is there a way to target all the elements inside a given <div> individually without having to change each CSS selector.
<div id="div1">
<h3>h3 div 1</h3>
<!-- whole bunch of html here -->
</div>
<div id="div2">
<h3>div 2</h3>
<!-- whole bunch of html here -->
</div>
This is how I normally do it...
#div1 > h3 {
background-color: lightblue;
}
However i am looking for a solution like this (treat this as pseudo code)
#div2 {
h3 {
background-color: lightgreen;
}
}
Here is a fiddle too: https://jsfiddle.net/8bstkq7u/1/

You can use exactly this syntax if you use scss. Change css to scss in your fiddle and your code will work.
This guide is a good point to start: SASS

Related

Change another div on hover which is not sibling nor child

My HTML code is similar to this :
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">...</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">...</p>
</div>
</div>
I'm using this in my CSS code :
.btn-1:hover {
.pro {
...
}
}
It works perfectly.
What I want to do now is to modify my .notpro class inside the btn-1:hover. As .notpro is not child or sibling with btn-1, it doesn't work.
.btn-1:hover {
.pro {
... // works
}
.notpro {
... // doesn't work
}
}
Is there a way to do this ?
Thank you !
There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.
You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.
The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.
.navbar:hover + .navbar .notpro {
color: red;
}
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">I am a Pro</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">I am Not a Pro</p>
</div>
</div>
I don't think this syntax is valid in CSS, meaning selector inside another selector.
You can add :hover to the 'pro' to get different behaviour than the parent div.

How to find nested classes using LESS

I need to write specific CSS to be applied for individual html file
Currently using : Angular 1.5 with LESS
Currently I am using angular application, where header and footer are common but middle content will vary as below...
<div class="header">Header</div>
<div class="container">
<div class="home-page">Home</div>
</div>
<div class="footer">Footer</div>
Here is the second page code
<div class="header">Header</div>
<div class="container">
<div class="contact-us">Contact</div>
</div>
<div class="footer">Footer</div>
Now, I need footer to be fixed in second page and relative in the first page.
Here, each page has specific less file.
My problem is if I write .footer{position:fixed} in less file all the pages are effected.
I found solution like Internal css is working in ContactUs.html (or) Adding new CSS in JS file using element, but I wanted to know is there any way to resolve the issue using less or css file?
Please find for reference. CSS needs to be applied whenever we see roadmap-page is loaded.
You can use CSS sibling selector + to achieve this. If the .footer is sibling to .contact-us then the position will be fixed. You can write the below CSS code in your common styles.css or styles.less file
.contact-us + .footer {
position: fixed;
}
.home-page + .footer {
position: relative;
}
If you dynamically want to set class to your footer component, It's better to use #Input() decorator. What I would do is
footer.component.ts
#Input() styleClass = 'footer';
footer.component.html
<div [class]="styleClass">Footer text</div>
contacts.component.html
<app-footer [styleClass]="'footer-fixed'">Footer text</div>
home.component.html
<app-footer>Footer text</div>
CSS
.footer-fixed { position: fixed }
.footer { position: relative }

Efficient ways to apply different css to same class

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.

Identify div through css

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.
}

Nested divs of same class, show child on hover

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;
}