CSS selector is not updating after click on element [duplicate] - javascript

This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 6 months ago.
Here is my markup:
<p>This is <span class="rounded">some</span> text which <span class="rounded">shows</span> what I <span class="rounded">want</span> to do.</p>
I have the following CSS:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
So, this turns the background of first rounded element to red.
Now, if i click on the word some, it applies a class clicked to the wrapping span tag. The HTML now looks like this:
<p>This is <span class="rounded clicked">some</span> text which <span class="rounded">shows</span> what I <span class="rounded">want</span> to do.</p>
At this point, I expect to word shows to have a red background because it seems to satisfy the selector:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
However, no other tag ever becomes red. What am I doing wrong?
How can I make the next tag red after the current one has been clicked?
Thanks.

To summarise the comments, and someone please correct me if I'm wrong on this first point, but this:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
Doesn't work because it will always find the 1st child of the <p> parent that is a span with class rounded, and if it is not clicked, it will apply the rule.
This solution does work:
span.clicked + .rounded:not(.clicked)
This will look for a span that is clicked, find the next span with class rounded, and apply the rule only if it's not clicked.

Related

CSS - Two classes applying different styles [duplicate]

This question already has answers here:
What is the order of precedence for CSS?
(9 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
Say I have an element on which two classes are getting applied with conflicting styles. How is the precedence of the styles chosen?
<h1 className="red blue">What color will I be?</h1>
css file:
.red {
color: red;
}
.blue {
color: blue;
}
Which color will be applied to the <h1> element?
I tried to experiment with it and what I have concluded is that the class that gets defined at the end of the file gets applied. But it's just an observation? Am I missing something here?
codesandbox: https://codesandbox.io/s/conflicting-classes-2jbi7
CSS will read from top to bottom.
So your text is blue, if you move red after blue in your CSS file, it should be red
The last class that is in the code will affect the h1.
If they have the same specificity, the last one is the one that the h1 will be affected by.

Prevent absolutely positioned element on top of div to block div's hover style? [duplicate]

This question already has answers here:
Disable hover on specific div
(3 answers)
Can I stop :hover from being applied to an element?
(7 answers)
Closed 3 years ago.
I have a div which has background-color: blue;. Now when I hover, it changes to red;
I also have an absolutely positioned element, which is (visually) on top of that div, semantically a sibling.
<div>
<div>My blue div</div>
<div>My absolutely positioned element, which is actually on top of my blue div</div>
</div>
Now when I hover over my absolutely positioned element, my blue div will remain blue, and not take its red hover style, since technically I am not hovering over it directly anymore.
Any way I can prevent this?
You can add some CSS to make your absolute positioned element be "transparent" for the your pointer(mouse, touch, etc) by adding following css. But this will also ignore all other events (click, mouseover etc)
.myAbsoluteDiv {
pointer-events: none;
}
if you still want to attach events etc. you can use following more extensive css
.blueDiv{
backgroundColor: blue;
}
.outsideDiv:hover .blueDiv {
backgroundColor: red;
}

How to position <span> elements under each other based on the width of the <span> element

This will sound pretty basic and stupid question, but I have to get this working hence asked on this channel.
I have elements in a span that I want to place next to each other, I have a width for the span element. I want the elements in that span to respect the width and when they grow beyond that I want them to fall on to the next line.
<div class="text">
<span>
eel1
</span>
<span>
eel1
</span>
<span>
eel1
</span>
<span>
eel1
</span>
</div>
// these values are array of strings that I populate inside this span
this is how it currently looks:
https://jsfiddle.net/gpjcutr9/2/
so I'm looking at getting this as output.
ele1, ele2, ele3,
ele4, ele5, ele6
So depending on the width of the span I want to be able to show that many elements in one line. Also since this is not static HTML and is dynamically generated spans for these elements.
Thanks!
Remove the clear: left; from span in your css. That's saying that each span element shouldn't allow floating elements on their left causing the spans to go to the next line.
Also change the width of the test class. At 20px, it is too small to fit the span elements.
Your css should look something like this:
span {
float: left;
}
.test {
width: 100%;
}
.spanWidth {
width: 80px;
}

Why the CSS is not working on last button? [duplicate]

This question already has answers here:
:last-child not working as expected?
(3 answers)
Closed 7 years ago.
Could you please tell me why CSS is not working on last button. Actually I give border to last button of button bar. I also apply important to that last button or of bar. But it is not taking CSS. Here is my last button CSS:
.button_account_bar > .button:last-child {
border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important;
}
http://codepen.io/anon/pen/oXdoBy
The issue is because last-child means it has to be the last child of the parent. Applying it to .button does not mean "last child button", it still has to be the very last child, regardless of if it's a button or not.
What you are basically saying is: apply style if it's a .button AND if it's the last-child
It seems you can use last-of-type instead:
.button_account_bar > .button:last-of-type {
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
You can check out browser support for last-of-type here
Note that you don't actually need !important at all, but you may have some other reason for it so I will leave that for you to decide on.
The last button is not the last child of its parent. You have another element, .toggle_button_div as the last child of .button_account_bar.
One way to solve it is to wrap the buttons in a new <div> and then refer to that in your CSS rule:
.button_account_bar > div > .button:last-child {
...
Demo here
In your code .button_account_bar is the parent class so it's last child is div which class is "toggle_button_div, so style for ".button_account_bar > .button:last-child" is not working use div-class="toggle_button_div" outside the div-class="button_account_bar" for proper work of your style, and absolutely your code will work. or you can use last-of-type in place of last-child

CSS/Javascript-based image selector

So forgive me, I'm just starting learning Javascript, I don't even know if this is possible. I have the following HTML code:
<div class="container">
<div class="topspace">
<div id="picholder" class="pic1">
<div class="picsel" id="picsel1" onclick="imgSel(1)"></div>
<div class="picsel" id="picsel2" onclick="imgSel(2)"></div>
</div>
</div>
</div>
And so what I want to accomplish is by clicking on one of the "picsel" divs (they appear as little squares at the bottom of the picholder div) I can change the backgroundImage used in picholder by changing the class associated with the picholder div. My Javascript appears as such:
function imgSel(n) {
var id1 = "pic" + n;
var id2 = "picsel" + n;
// 'zero out' all the picsel boxes to their default color
document.getElementByClass('picsel').style.backgroundColor="#333";
// change the background-image for picholder
document.getElementById('picholder').style.className=id1;
// change the picsel box that was clicked to white
document.getElementById(id2).style.backgroundColor="#FFF";
}
And my CSS appears as such:
#picholder {width:798px; height:340px; border:1px solid #333; background-color:#333;}
.picsel {width:8px; height:8px; background-color:#333; border:1px solid #333; margin-left:4px; top:340px; position:relative; float:left;}
.picsel:hover {cursor:pointer; background-color:#888;}
.pic1 {background-image:url('data/main001.jpg');}
.pic2 {background-image:url('data/main002.jpg');}
I've run an Alert on it and the variables are being added right, so I guess what I'm wondering is, is it possible to change the className (or is that even a command?). At this point I'm thinking I can't assign a variable to the className=var or getElementById(var), but...well...have at it.
It's currently running at http://www.mdw-art.com/, but in an HTML-based version that doesn't indicate which square is currently being displayed. So I basically want it to do that, but I'm trying to get the boxes to indicate which one is currently displayed and get the code out of the HTML (because I want to apply this same concept to other galleries later).
Yes, add a class name to the selected item and allow the CSS of that class do the work for you instead of changing the inline style with JavaScript. That way you can just remove the class name from the element to un-do the selection.
try .className instead of .style.className

Categories

Resources