I want to change the background color of last nested element. I am using following css but it is not working
.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{
background-color:red;
}
i also tried
#cd-timeline .year-wrapper .cd-timeline-block:last-of-type{
background-color:red;
}
What am i doing wrong can we use last-of-type element with class
Fiddle http://fiddle.jshell.net/shfh0x63/2/
<div class="timeline-wrapper">
<div class="cd-container" id="cd-timeline">
<div class="year-wrapper">
<div class="cd-timeline-block">1</div>
<div class="cd-timeline-block">2</div>
<div class="cd-timeline-block">3</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">4</div>
<div class="cd-timeline-block">5</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">6</div>
<div class="cd-timeline-block">7</div>
<div class="cd-timeline-block">8</div>
<div class="cd-timeline-block">change background color of this only</div>
</div>
</div>
</div>
You have use undefined selector (.cd-timeline instead of #cd-timeline - in HTML you have ID, not class). Then you need to add last-of-type to .year-wrapper too
#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^ ^^^^^^^^^^^^^
http://fiddle.jshell.net/shfh0x63/3/
This is the easiest way of doing it using :last-child
(Demo)
.year-wrapper:last-child .cd-timeline-block:last-child {
background-color: red;
}
Related
How can I change the background color of the whole site or the text color when I click on a color from one component to another?
I need to use the Output decorator but how ?
style.component.html
<div>
<h2>background colors</h2>
<div class="theme-options">
<div class="theme-white"></div>
<div class="theme-blue"></div>
<div class="theme-orange"></div>
<div class="theme-green"></div>
</div>
<hr>
<h2>text Color</h2>
<div class="theme-options">
<div class="theme-white"></div>
<div class="theme-blue"></div>
<div class="theme-orange"></div>
<div class="theme-green"></div>
</div>
</div>
app.component.html
<app-signin></app-signin>
<app-style></app-style>
I just made a cut down version for demonstration for the background-color. It works the very same for text-color.
Step 1:
We need to add an unique onclick trigger to the buttons/boxes. So if they are pressed, they will fire a script.
Step 2:
We add a function that removes all possible classes to change the background-color by using document.querySelector("body").classList.remove("class");. That will remove possible a class from the body tag.
Step 3:
We add the same JS line with add instead of remove to add the wanted class to the body tag: document.querySelector("body").classList.add("class");.
Step 4:
We apply changes to the class in the css
There of course possibilities to cut the script down. However I believe that this way is the easiest to understand and reproduce for a beginner.
function textWhite() {
document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-white");
}
function textBlue() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-blue");
}
function textOrange() {
document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-orange");
}
function textGreen() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-blue");
document.querySelector("body").classList.add("background-green");
}
.background-white {
background-color: white;
}
.background-blue {
background-color: blue;
}
.background-orange {
background-color: orange;
}
.background-green {
background-color: green;
}
<body>
<h2>background colors</h2>
<div class="theme-options">
<div onclick="textWhite()" class="theme-white">White</div>
<div onclick="textBlue()" class="theme-blue">Blue</div>
<div onclick="textOrange()" class="theme-orange">Orange</div>
<div onclick="textGreen()" class="theme-green">Green</div>
</div>
<hr>
<h2>text Color</h2>
<div class="theme-options">
<div class="theme-white">White</div>
<div class="theme-blue">Blue</div>
<div class="theme-orange">Orange</div>
<div class="theme-green">Green</div>
</div>
</body>
For instance in the code
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
</div>
The elements I would want to select are marked selected, and the elements I do not want selected are marked unselected.
<div class="ofChildClass" unselected>
<div class="other1" selected>
<div class="other2" selected>
<div class="ofStopClass" unselected>
<div class="other3" unselected>
<div class="other4" unselected>Text</div>
</div>
</div>
</div>
<div class="other5" selected></div>
<div class="ofStopClass" unselected></div>
</div>
</div>
</div>
Is it possible to make a selector, or multiple selectors that would select these elements without bruteforce.
To put the question into code is it possible to do this
.ofChildClass > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass)
...
without needing to repeat.
Not sure what kind of CSS you want to apply but this behavior can be defined using CSS variables like below:
:root {
--c:initial; /* we start by initial (nothing defined, default value)*/
}
div {
outline:4px solid;
outline-color:var(--c);
padding:10px;
margin:5px;
}
div::before {
content:attr(class);
}
/* we define the color here */
.ofChildClass > * {
--c:red;
}
/* we reset the coloration again here*/
.ofStopClass {
--c:initial;
}
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
What I understood from your question is that you need to target divs that are marked selected only. You can do this by a code like this:
div[selected]{
color: blue;
}
div{
color: initial;
}
This code target all the divs that have a selected attribute given to them. As the color property is 'inherited', I had to revert color of all the divs to initial. This is just an example, otherwise div[selected] will select all the marked divs.
I've got a menu with 3 levels of deepness. It starts with the categories, then the subcategories, and after all, the final links. Some of these links are already in the second or even the first level, but that's not a problem. The menu is working fine.
The problem is that I'm trying to make it look fancy, so I added to each div a class that designates the menu level. You can see the full Angular template here. Mind that these classes are the "lvl0", "lvl1", "lvl2":
<div class="menu-container">
<div class="row header">
<img class="logo" src="../../../assets/menu-header.PNG">
</div>
<div class="row menu-btn">
<div class="inner-menu-btn" (click)="openMenu()">
<span class="menu-span" [#menuStringAnim]="active">MENU</span>
<i class="fa fa-bars menu-icon" [#menuIconAnim]="active"></i>
</div>
</div>
</div>
<div class="menu-list" [#menuListAnim]="active">
<div class="row row-fix lvl0" *ngFor="let category of getCategories()" (click)="openCategory(category)">
<div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-top-level">{{ category?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl0 == category.key">
<br>
<div class="row row-fix lvl1" *ngFor="let subcategory of getSubcategories(category.key)" (click)="openSubcategory(subcategory)">
<div class="little-menu-bar-midlvl"></div>
<span class="menu-second-level">{{ subcategory?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
<br>
<div class="row row-fix lvl2" *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key)" (click)="openUrl(thirdLevel)">
<div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-third-level">{{ thirdLevel?.title?.toUpperCase() }} </span>
</div>
</div>
</div>
</div>
</div>
</div>
So these classes are very simple. I'm not very good at CSS (I prefer designing logic rather than designing), and maybe I'm doing some stupid thing here:
.lvl0 :hover{
color: orange;
}
.lvl1 :hover{
color: orange;
}
.lvl2 :hover{
color: orange;
clear: both;
}
So the behavior works nice for first level, but as you can see, all the rows with the second level get highlighted instead of just the one I'm hovering on:
Same happens with the third level.
Do you have any idea on what I'm doing wrong? I'm adding the Angular tag just in case it has something to do with my template code. Thank you!
The problem is that you have applied the style to your div and as the divs are nested, the styles will cascade and turn everything inside it the colour - you can try to apply the styles directly to the spans to avoid this. Also I have removed the space before your hover colon
.lvl0:hover>span { /* leave hover on div but style the span */
color: orange;
}
.lvl1:hover>span {
color: red;
}
.lvl2:hover>span {
color: green;
}
<div class="lvl0">
<span>test 0</span>
<div class="lvl1">
<span>test 1</span>
<div class="lvl2">
<span>test 2</span>
</div>
</div>
</div>
The :hover is basically propagating down to other levels. Do not use CSS on the parent directly. Instead, use it on something like span etc.
Check pen here to solve your issue. In your case, you can have <div> tag too instead of the span which closes there and is basically a sibling of next level.
.lvl:hover {
//common for all
color: orange;
}
I am having some problem with the first-child and nth-child function in CSS. I have some divs structured like this:
<div class = container>
<div id = 456, class = item>
<div id = header_123, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
<div id = 789, class = item>
<div id = header_124, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 789</div>
</div>
</div>
</div>
<div id = 123, class = item>
<div id = header_125, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 123</div>
</div>
</div>
</div>
</div>
I want to change the left-margin of the first div with class item. I use
.item div:first-child{
margin-left: 30px;
}
This changes the div with id 456's margin, but also the margin of all the text_container and header_span. This is not what I want; what am I doing wrong?
Use the immediate child selector >:
.item > div:first-child {
margin-left: 30px;
}
Note: And I could see that you are not wrapping your attributes inside " and also an id cannot start with a number.
I want to change the left-margin of the first div with class item.
If that's the case, you need to use:
div.item:first-child {
margin-left: 30px;
}
But that gives totally a different one.
Try This
.item:first-child{
margin-left: 30px;
}
Your html has few mistakes, Try to fix it like this: Demo
Wrap class and id with " "
Remove div's that have , in between id and class
HTML:
<div class="container">
<div id="456" class="item">
<div id="header_123" class="item_header">
<div class="text_container">
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
...
CSS:
.item:first-child {
margin-left: 30px;
}
As Sanjay and Praveen mentioned you need to use :first-child pseudo-class
in HTML I have the following structure:
<div class="row" id="info-section">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel panel-default">
<div class="panel-heading"><h4>Calendario Eventi</h4></div>
<div class="panel-body">
<?php
// 'My_Widgtet_Area' area, where the id is called:
if (is_active_sidebar('calendar_widget_zone')) : ?>
<div id="widget-sidebar">
<ul>
<?php dynamic_sidebar('calendar_widget_zone'); ?>
</ul>
</div><!-- #widget-sidebar .widget-area -->
<?php endif; ?>
</div>
</div>
</div>
</div>
And now, using CSS I want select (to change a value) of the .panel-heading class that is into the #info-section div
What can I do to select only the .panel-heading item nested into #info-section div?
Tnx
Andrea
You can either use the nested or the in selector:
#info-section .panel-heading {
/* css */
}
or you can use the child selector (which means that it should be inside the container, not inside of one of their children)
#info-section > .panel-heading {
/* css */
}
Simply use the CSS selector:
#info-section .panel-heading{
//css stuff here
}
Follow the yellow brick road :)
CSS
#info-section .panel-heading {
/* CSS STYLES */
}
CSS
#info-section .panel-heading{
//Your Style
}