I have this html markup which I can't change due to my theme.
<div class="x-breadcrumb-wrap">
<div class="x-container max width">
<div class="x-breadcrumbs"><span class="home"><i class="x-icon-home" data-x-icon=""></i></span> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> Guides <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> <span class="current"> london <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> <span class="current">Stays <span class="delimiter"><i class="x-icon-angle-right" data-x-icon=""></i></span> <span class="current">Venue</span></div>
</div>
</div>
I am trying to remove the background for the first:child (i.e. home icon) but using the code below the background is removed for subsequent links in the breadcrumbs.
.x-breadcrumb-wrap a {
color: #ffffff !important;
background: #2b2b2b;
padding: 1px 6px 1px 6px;
text-shadow: none !important;
letter-spacing: 0.13em;
border-radius: 3px;
}
.x-breadcrumb-wrap a:first-child {
background: transparent;
}
any ideas ?
Your selector isn't working as expected because it is selecting all of the descendant a elements that are a first child.
You need to use the direct child selector, >, in order to only target the direct child a element of the .x-breadcrumbs element. In doing so, only the first child in the .x-breadcrumbs element is selected rather than all of the descendant elements that happen to be the first child of their parent element.
.x-breadcrumb-wrap .x-breadcrumbs > a:first-child {
background: transparent;
}
Related
When the .post-item <div> is hovered I want to execute some specific styles (change background-color and cursor) but I don't want this to happen if the .rating-wrapper <div> is hovered too. This happens because I want the .rating-wrapper to do something different than the hover of its parent. Basic question: How to do only child's hover, ignoring the parent's hover
HTML:
<div class="post-item">
<div class="rating-wrapper">
<div class="upvote">
<img src="/images/upvote_arrow.png" alt="upvote" />
</div>
<div class="rating"></div>
<div class="downvote">
<img src="/images/downvote_arrow.png" alt="downvote" />
</div>
</div>
<span class="owner-data">
<img src="" alt="" class="owner-avatar" />
<span class="owner-username"></span>
</span>
<span class="creation-date"></span>
<div class="title"></div>
</div>
Since you want to change the style of the parent element based on a pseudo-class of the child element, this isn't really possible with CSS alone today.
You can do it with the :has() pseudo-class but that is currently only supported in Safari (with support for Chrome a few months away and no sign of it in Firefox, Edge, Opera or elsewhere).
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(:has(#child:hover)) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
For a more reliable approach, you should probably look at adding a splash of JavaScript to the mix.
Use mouseenter and mouseleave events to modify the classes of the parent element, then reference the class in your stylesheet.
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
const enter = event => parent.classList.add('child-hover');
const leave = event => parent.classList.remove('child-hover');
child.addEventListener('mouseenter', enter);
child.addEventListener('mouseleave', leave);
#parent {
background: white;
border: solid black 1px;
padding: 2em;
max-width: 50%;
margin: auto;
}
#parent:hover:not(.child-hover) {
background: orange;
}
#child {
background: #aaa;
border: solid black 1px;
padding: 2em;
}
#child:hover {
background: green;
}
<div id="parent">
<div id="child"></div>
</div>
You can use this CSS Selector,
.post-item>:not(.rating-wrapper):hover {
background-color: white;
}
This will select all immediate children of .post-item which are not .rating-wrapper.
To change the block of the remaining items background color, you can enclose them in another div.
There is a css property called not property.The syntax is like:
:not(element) {
// CSS Property}
If you want to learn more, please visit this link:
https://www.geeksforgeeks.org/how-to-exclude-particular-class-name-from-css-selector/
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
try:
pointer-events: none
you can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Let's say I have a page which displays emotion and the corresponding text for it.
I wanted to change color of text based on the type of emotion. I've followed nesting inside text class but that didn't apply the styles mentioned for the text alone. Is there any way to do this?
.emotion{
display: flex;
&__text {
outline: 1px solid blue; // Not applied
&--happy{
color: rebeccapurple
}
&--sad{
color: yellow
}
}
}
<div class="emotion">
<span class="emotion__text--happy">
Happy
</span>
<!-- <span className="emotion__text__sad"></span>
<span className="emotion__text__tears"></span>
<span className="emotion__text__joy"></span> -->
<span class="emotion__happy">
😀
</span>
</div>
Your SCSS:
.emotion { &__text { outline: 1px solid blue; } }
means the same as this CSS:
.emotion__text { outline: 1px solid blue; }
And the class selector .emotion__text means:
✅ Elements which are members of the emotion__text class.
You don't have any elements that match.
You have an element with class="emotion" and one with class="emotion__text--happy" but not class="emotion__text"
It doesn't mean:
❌ Elements which are members of any class which starts with emotion__text.
You could add that class to an element:
class="emotion__text emotion__text--happy"
Here's the Problem:
focus-within applies to all Child Elements inside a Tag
Example:
<a class="open" href="#">open menu</a>
<div class="parent">
<a class="link1" href="#">link1</a>
<a class="link2" href="#">link2</a>
<div class="menu2">...123</div>
<a class="link3" href="#">link3</a>
<div class="menu3">...456</div>
</div>
in this example, I've used a.link2 and a.link3 for opening menu while they're on focus.
and I need to set a.link1 for closing the div.parent
and I've done that by:
<style>
.parent{width:200px;height:100%;position:fixed;left:-30em;background:lightyellow;}
.open:focus + .parent,.parent:hover{left:0;}/*opening sidebar*/
.parent:focus-within{left:-20em;}/*closing sidebar*/
.parent:focus-within + a.link1{left:-20em}/*closing sidebar*/
</style>
when i click on a.link2 & a.link3 it also close the sidebar,and I only want to apply to a.link1 to be able to close the sidebar!
How can i set a.link1 to close the sidebar and not(a.link2 & a.link3 and ....) with only css, no JavaScript?
is there any way?
.parent{width:200px;height:100%;position:fixed;left:-30em;background:lightyellow;}
.open:focus + .parent,.parent:hover{left:0;}/*opening sidebar*/
.parent:focus-within{left:-20em;}/*closing sidebar*/
.parent:focus-within + a.link1{left:-20em}/*closing sidebar*/
<a class="open" href="#">open menu</a>
<div class="parent">
<a class="link1" href="#">link1</a>
<a class="link2" href="#">link2</a>
<div class="menu2">...123</div>
<a class="link3" href="#">link3</a>
<div class="menu3">...456</div>
</div>
The short answer is that it isn't possible with the method you're trying to use.
The reason for this is that selectors only go top down. This means that although the parent div can get closed by clicking on one of it's children, this is only made possible because of the focus-within selector. It has nothing to do with the parent's children. If you want element A to affect element B in CSS, element A needs to be either a sibling or just at least a level above element B in order to affect it.
In order to create this sort of sidebar only with CSS, you'd have to use the "checkbox hack". I'll leave a small example here then explain how it works:
* {
font-family: 'Segoe UI', monospace;
}
#toggler {
display: none;
}
nav {
position: fixed;
top: 0;
left: -150px;
width: 200px;
height: 100vh;
box-shadow: 1px 2px 3px rgb(30 30 30 / 50%);
transition: left 0.2s;
}
img {
width: 30px;
}
label {
display: block;
text-align: right;
padding: 10px;
cursor: pointer;
}
#toggler:checked + nav {
left: 0;
}
<input type="checkbox" id="toggler">
<nav>
<label for="toggler">
<img src="https://cdn4.iconfinder.com/data/icons/website-library/32/hamburger_List_hamburger_right_menu_website-512.png" alt="">
</label>
</nav>
Basically, the actual checkbox is outside of the nav. That way, whether it's checked or not can affect the nav, which is its sibling. However, the label for that checkbox is still inside of the nav, which creates the behavior you seem to want. When a label is clicked on, it affects whether its corresponding checkbox is checked or not. This lets us get around the problem of children not being able to affect parents in CSS.
EDIT:
So, I just found another hack using anchor tags and the :target pseudo selector.
Here's another snippet:
nav {
position: absolute;
top: 0;
left: -150px;
width: 200px;
height: 100vh;
box-shadow: 1px 2px 3px rgb(30 30 30 / 50%);
text-align: right;
padding: 5px;
box-sizing: border-box;
transition: left 0.2s;
}
a {
display: block;
margin: 5px 0;
font-family: 'Segoe UI', monospace;
color: blue;
}
#open:target ~ nav {
left: 0;
}
#close:target ~ nav {
left: -150px;
}
<div id="open"></div>
<div id="close"></div>
<nav>
Open
Close
</nav>
The way this works is that first of all, we need some elements that will at least be on the same level as our nav, so that they'll have the ability to affect it. Each element has an id that anchor tags can use as a target. When an anchor tag is clicked on, the element with the id that is in the anchor tag's href has its :target pseudo selector triggered. Since the elements targeted in this example are siblings of the nav, they can affect its style when targeted. ~ is just a sibling selector, and it targets any sibling, not only adjacent siblings like + does.
Please check the fiddle: http://jsfiddle.net/C23g6/1255/
I want the last child (7777) border top to be display none.
I tried but i couldn't get please give me solution.
Only through css
CSS
.common.true{
display: block;
border-top: 1px solid red;
}
.common{
display: none;
}
.true:last-child{
border-top: none;
}
I dont want the last child border not to be displayed. But not using nth child. some other way
First thing, If you do display: none of last element then how can you use css on that element(hidden element).
If you want to get Id or class (attribute) to perform action on that, you should choose js or jquery.
Second thing, the last-child would be 8888, but you want to do with second last-child, then use this, it may work :
.common:nth-last-child(2){
border-top:none !important;
}`enter code here`
You have a basic mistake in the HTML.Your last child in HTML is 8888 and you want to hide border-top of 7777.Use the following:
<div id="my-section">
<div class="common true">1111</div>
<div class="common">2222</div>
<div class="common true">3333</div>
<div class="common true">4444</div>
<div class="common true">5555</div>
<div class="common true">6666</div>
<div class="common true">7777</div>
<div class="common">8888</div>
</div>
.common.true{
display: block;
border-top: 1px solid red;
}
.common{
display: none;
}
.true:last-child{
border-top: none;
}
#my-section .common:nth-last-child(2){
border-top:none !important;
}
I have added a new css selector,which hide the border of 2nd last child.
I have CSS that changes formatting when you hover over an element.
.test:hover { border: 1px solid red; }
<div class="test">blah</div>
In some cases, I don't want to apply CSS on hover. One way would be to just remove the CSS class from the div using jQuery, but that would break other things since I am also using that class to format its child elements.
Is there a way to remove 'hover' css styling from an element?
One method to do this is to add:
pointer-events: none;
to the element, you want to disable hover on.
(Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
Browser Support ( 98.12% as of Jan 1, 2021 )
This seems to be much cleaner
/**
* This allows you to disable hover events for any elements
*/
.disabled {
pointer-events: none; /* <----------- */
opacity: 0.2;
}
.button {
border-radius: 30px;
padding: 10px 15px;
border: 2px solid #000;
color: #FFF;
background: #2D2D2D;
text-shadow: 1px 1px 0px #000;
cursor: pointer;
display: inline-block;
margin: 10px;
}
.button-red:hover {
background: red;
}
.button-green:hover {
background:green;
}
<div class="button button-red">I'm a red button hover over me</div>
<br />
<div class="button button-green">I'm a green button hover over me</div>
<br />
<div class="button button-red disabled">I'm a disabled red button</div>
<br />
<div class="button button-green disabled">I'm a disabled green button</div>
Use the :not pseudo-class to exclude the classes you don't want the hover to apply to:
FIDDLE
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>
.test:not(.nohover):hover {
border: 1px solid red;
}
This does what you want in one css rule!
I would use two classes. Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class. This isn't directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it.
Example:
.test { border: 0px; }
.testhover:hover { border: 1px solid red; }
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>
add a new .css class:
#test.nohover:hover { border: 0 }
and
<div id="test" class="nohover">blah</div>
The more "specific" css rule wins, so this border:0 version will override the generic one specified elsewhere.
I also had this problem, my solution was to have an element above the element i dont want a hover effect on:
.no-hover {
position: relative;
opacity: 0.65 !important;
display: inline-block;
}
.no-hover::before {
content: '';
background-color: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 60;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">hover</button>
<span class="no-hover">
<button class="btn btn-primary ">no hover</button>
</span>
You want to keep the selector, so adding/removing it won't work. Instead of writing a hard and fast CSS selectors (or two), perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion:
$(".test").hover(
if(some evaluation) {
$(this).css('border':0);
}
);