I am working with another developer's code and want to know if there is a way to apply a different opacity to "scrollbar" using CSS code when "overlay" is present but not when "overlay-inactive" is present under "table" as shown below. Is this possible?
/*Want scrollbar to have opacity:1 in this table*/
<div class ="table">
<div class = "overlay"></div>
<div class = "scrollbar"></div>
</div>
/*Want scrollbar to have opacity:0 in this table*/
<div class ="table">
<div class = "overlay-inactive"></div>
<div class = "scrollbar"></div>
</div>
/*Class structure is the developer's and cannot be changed to have scrollbar as a subclass of overlay*/
Use the + operator to reference the next element to current element.
.overlay + .scrollbar {
opacity: 1;
}
.overlay-inactive + .scrollbar {
opacity: 0;
}
<div class="table">
<div class="overlay">1 - You can see me</div>
<div class="scrollbar">2 - You can see me</div>
</div>
<div class="table">
<div class="overlay-inactive">1 - You can see me but not below</div>
<div class="scrollbar">2 - Hidden content</div>
</div>
Use the adjacent sibling operator + to determine if the class exists on an adjacent element:
.overlay + .scrollbar {
opacity: 1;
}
.overlay-inactive + .scrollbar {
opacity: 0;
}
Related
This question already has answers here:
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 1 year ago.
I'm been working on finding a way to change my even and odd setup so it relies more on the classes instead of the html strucktur but am at a complet loss.
The setup i but below works but if there's too much change to the HTML it would likely break.
(The HTML images gives a simpel overview)
The collapsed HTML version shows 3 div's but the 2 div is actually a set of 2.
The classes it goes like this:
academy-subject-block
academy-column-block
academy-column-block
academy-subject-block
The end result is 4 squares where the first one keeps it's image from what it had on tablet size screens and above.
The next 3 will alternate between a white and a light grey bagground-color without the images.
HTML from browser view:
HTML Viewed from browser
HTML Viewed from browser collapsed
HTML:
<div class="container academy ">
<div class="academy-front-page">
<div class="fullPageAdjustment">
#Html.PropertyFor(m => m.CurrentPage.ContentArea)
</div>
</div>
</div>
-------------------------------------------------------------
<div class="academy-subject-block">
<div class="row">
<div class="col-xs-12">
<div class="img-fullwidth cover-image">
<img src="#Url.ContentUrl(Model.CoverImage)" alt="Cover Image" class="fill-height-image min-height"/>
<div class="cta-turquiose-centerallign-mobile">
<a href="#Url.ContentUrl(Model.ButtonLink)" class="pulse animated btn bta-cta-turkuoise">
#Html.PropertyFor(l => l.ButtonText)
</a>
</div>
</div>
</div>
</div>
<div class="text-block-image fadeIn animated">
#Html.PropertyFor(m => m.OverlayText)
</div>
</div>
-------------------------------------------------------------
<div class="academy-column-block ">
<div class="img-fullwidth cover-image">
<img src="#Url.ContentUrl(Model.CoverImage)" alt="Cover Image" class="fill-height-img min-height"/>
<div class="cta-turquiose-centerallign">
<a href="#Url.ContentUrl(Model.ButtonLink)" class="pulse animated btn bta-cta-turkuoise">
#Html.PropertyFor(l => l.ButtonText)
</a>
</div>
</div>
<div class="text-block-image-column-block fadeIn animated">
#Html.PropertyFor(m => m.OverlayText)
</div>
</div>
SCSS:
//Pulls the section up and down as to remove any spacing
.academy-front-page {
.fullPageAdjustment {
#include mobile {
position: relative;
margin-top: -80px;
bottom: -40px;
}
}
//Removes images but keeps the size without effecting the fist image
//And adds new text color to images that have changed
:not(:first-child) {
#include mobile {
img {
width: 0;
}
.text-block-image-column-block {
color: #{$Color-DarkPurple};
}
.text-block-image {
color: #{$Color-DarkPurple};
}
}
}
//Switches between background-colors of the images with exception of the fist one (Mobile only)
div :nth-child(odd) {
#include mobile {
.img-fullwidth {
background-color: #{$Color-White};
}
.hidden-print {
.img-fullwidth {
background-color: #{$Color-WhiteSmoke};
}
}
}
}
:nth-child(even) {
#include mobile {
.img-fullwidth {
background-color: #{$Color-White};
}
.hidden-print {
.img-fullwidth {
background-color: #{$Color-WhiteSmoke};
}
}
}
}
}
Afaik, this is currently not possible with CSS alone.
You would have to:
use Javascript to implement that CSS class based or
go with the CSS pseudo classes :nth-of-type or :nth-child depending on HTML elements.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I have a setup for displaying information as the user hovers over a specific element. When the specific element is hovered over, the information will appear in an adjacent div depending on which div the user hovers over. Here's the HTML...
#emp-node:hover+#emp-details {
opacity: 1;
}
.node-details {
opacity: 0;
}
<div class="half interactions">
<div id="nodes">
<div id="emp-node" class="node">EMPATHY</div>
<div id="def-node" class="node">DEFINE</div>
<div id="id-node" class="node">IDEATE</div>
<div id="por-node" class="node">PROTOTYPE</div>
<div id="test-node" class="node">TESTING</div>
</div>
<div id="node-text">
<div id="emp-details" class="node-details">1</div>
<div id="def-details" class="node-details">2</div>
<div id="id-details" class="node-details">3</div>
<div id="por-details" class="node-details">4</div>
<div id="test-details" class="node-details">5</div>
</div>
</div>
The node-details are set to an opacity of 0. When I hover over emp-node I would like emp-details to show, and the same pattern for the other divs. Here's the CSS...
#emp-node:hover + #emp-details { opacity: 1; }
I believe my issue is with the selector. I know that I need to use one but I've tried them all to no avail. Can some help me figure out how to get this to work properly? Do I need to restructure my HTML or is there a solution?
Thanks is advance.
Keep in mind CSS can take you just part of the way, for example there is no parent selectors in CSS yet, you can not walk back. For stuff like that there is JS.
So for you its restructure HTML, for example you simply make them siblings, to be on same level at least:
#emp-node:hover~#emp-details {
opacity: 1;
}
#def-node:hover~#def-details {
opacity: 1;
}
#id-node:hover~#id-details {
opacity: 1;
}
#test-node:hover~#test-details {
opacity: 1;
}
.node-details {
opacity: 0;
}
<div class="half interactions">
<div id="nodes">
<div id="emp-node" class="node">EMPATHY</div>
<div id="def-node" class="node">DEFINE</div>
<div id="id-node" class="node">IDEATE</div>
<div id="por-node" class="node">PROTOTYPE</div>
<div id="test-node" class="node">TESTING</div>
<div id="emp-details" class="node-details">1</div>
<div id="def-details" class="node-details">2</div>
<div id="id-details" class="node-details">3</div>
<div id="por-details" class="node-details">4</div>
<div id="test-details" class="node-details">5</div>
</div>
Or javascript:
document.querySelectorAll("#nodes > .node").forEach(node => {
node.addEventListener("mouseover", function(event) {
let id = this.id.split("-")
//get ids
document.querySelectorAll("#node-text > .node-details").forEach(details => {
details.style.opacity = 0;
});
//on every hover set all to opacity 0
document.querySelector("#node-text > div[id^='" + id[0] + "']").style.opacity = 1;
});
//set the one that id bigins with id of hover element opacity 1
});
document.querySelectorAll("#nodes > .node").forEach(node => {
node.addEventListener("mouseover", function(event) {
let id = this.id.split("-")
document.querySelectorAll("#node-text > .node-details").forEach(details => {
details.style.opacity = 0;
});
document.querySelector("#node-text > div[id^='" + id[0] + "']").style.opacity = 1;
});
});
.node-details {
opacity: 0;
}
<div class="half interactions">
<div id="nodes">
<div id="emp-node" class="node">EMPATHY</div>
<div id="def-node" class="node">DEFINE</div>
<div id="id-node" class="node">IDEATE</div>
<div id="por-node" class="node">PROTOTYPE</div>
<div id="test-node" class="node">TESTING</div>
</div>
<div id="node-text">
<div id="emp-details" class="node-details">1</div>
<div id="def-details" class="node-details">2</div>
<div id="id-details" class="node-details">3</div>
<div id="por-details" class="node-details">4</div>
<div id="test-details" class="node-details">5</div>
</div>
</div>
Useful topic:
Is there a CSS parent selector?
You can achieve your needs by removing the 2 div wrappers id nodes and node-text as the below :
Html`
<div class="half interactions">
<div id="emp-node"classs="node">EMPATHY</div>
<div id="def-node" class="node">DEFINE</div>
<div id="id-node" class="node">IDEATE</div>
<div id="por-node" class="node">PROTOTYPE</div>
<div id="test-node" class="node">TESTING</div>
<div id="emp-details" class="node-details">1</div>
<div id="def-details" class="node-details">2</div>
<div id="id-details" class="node-details">3</div>
<div id="por-details" class="node-details">4</div>
<div id="test-details" class="node-details">5</div>
</div>
Css
#emp-node:hover ~ #emp-details {
opacity: 1;
}
.node-details {
opacity: 0;
}
Codepen https://codepen.io/ahamdan/pen/gOMaeNv
This is the initial html which has 'n' no. of child elements with same class name.
<div class="reading-content">
<div class="c-resourceitem-content">
<div data-id="1" class="resource"></div>
<div class="btn" id="btn"></div>
</div>
<div class="c-resourceitem-content">
<div data-id="2" class="resource"></div>
<div class="btn" id="btn"></div>
</div>
<div class="c-resourceitem-content">
<div data-id="3" class="resource"></div>
<div class="btn" id="btn"></div>
</div></div>`
Javascript: Appending a div as a handler which resizes the element vertically
$('.reading-content').children('.c-resourceitem-content').each(function eachFn() {
$(this).children().wrapAll("<div class='resourceitem-content-wrap'></div>");
var id = $(this).children("resource").attr('id');
ResourceSplitter = $('<label class="resource-splitter ">'+'</label>').attr("id", "id_" + id);
$( ResourceSplitter).appendTo($(this));
$(this).resizable({
handles: { 's' : '.resource-splitter' }
});
});
The final html snippet looks like this by wrapping all child div and appending a handler for resizing as per need .
<div class="reading-content">
<div class="c-resourceitem-content">
<div class="resourceitem-content-wrap">
<div data-id="1" class="resource"></div>
<div class="btn" id="btn"></div>
</div>
<label class="resource-splitter" id="id_1"></label>
</div>
</div>
But the problem is that resizing happens only for the first child element with the class 'c-resourceitem-content' inside the .each() function.
Please do help me out with a solution so that all the child classes are resizable by using the handler appended to each div.
CSS:
.resourceitem-content-wrap{
overflow-y:auto;
overflow-x: hidden;
width:100%;
height:100%;
}
.resource-splitter{
background:#ccc;
height:5px;
border-left:none;
display:block;
flex: 0 0 auto;
cursor: row-resize;
z-index: 80;
}
.reading-content {
height:auto;
margin-top: 15px;
margin-right: 15px;
}
Noticed with the code provided the id applied to the resource-splitter is undefined. Using the index value on the .each function will remove the need for this code:
var id = $(this).children("resource").attr('id');
The index will enumerate over each c-resourceitem-content, I've added an id variable that starts from 1. Like below:
$(".reading-content")
.children(".c-resourceitem-content")
.each(function eachFn(index) {
let id = index + 1;
$(this)
.children()
.wrapAll("<div class='resourceitem-content-wrap'></div>");
ResourceSplitter = $(
'<label class="resource-splitter ">' + "</label>"
).attr("id", "id_" + id);
$(ResourceSplitter).appendTo($(this));
$(this).resizable({
handles: { 's': ".resource-splitter" }
});
});
Are you able to provide the styling applied to the html so I can test it further?
I'm gonna select element with class but named 'path_from' etc.
Let me show you example
<div class='path_from_5_to_6'></div>
<div class='_6'></div>
<div class='path_from_6_to_5'></div>
<div class='path_from_3_to_2'></div>
I want to select element which class is start with path_from but contain '_6'
How can I do this?
You can use [class^="path_from"][class*="_6"] attribute selector
[class^="path_from"] - class starts with path_from
[class*="_6"] - class contains _6
[class^="path_from"][class*="_6"] {
background: blue;
}
<div class='path_from_5_to_6'>DIV</div>
<div class='_6'>DIV</div>
<div class='path_from_6_to_5'>DIV</div>
<div class='path_from_3_to_2'>DIV</div>
here is an example
[class*="path"][class*="6"] {
width: 100px;
height: 100px;
background: yellow;
}
<div class="path_To_6"></div>
You don't. That is what you use class and id for. class for related elements and id for individual elements.
<div class="path_6" id="path_from_5_to_6"></div>
<div id="_6"></div>
<div class="path_6" id="path_from_6_to_5"></div>
<div id="path_from_3_to_2"></div>
Then you select using .path_6 only:
.path_6 {
// styles
}
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;
}