[class*="grid-"]{
border: 2px solid green;
}
[class^="grid-"]{
border: 2px solid red;
}
<div class="row">
<div class="grid-sm-1-3">one</div>
<div class="grid-sm-1-3">two</div>
<div class="other class grid-sm-1-3">three</div>
</div>
<div class="layout-grid-edit">do not match at all</div>
The issue is, if the element has multiple classes then the class^="grid-=" doesn't seem to work, and I can't rely on class*="grid-" because it also matches something like layout-grid-edit which is not desired.
#3zzy - Give this attribute selector a try below. This type of selector will be effective in targeting a class attribute beginning with the whole word grid, immediately followed by a hyphen:
[class|="grid"] { border: 2px solid green; }
See if this does the trick, and let me know.
Replaced:
[class*="grid-"]{
}
With:
[class^="grid-"],
[class*=" grid-"]{
}
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
<div class="abc"></div>
I need to delete this div if there is nothing in between the div tags means when div is empty.
I am approaching in CSS like this
div.abc:empty{display:none;}
But I have one problem if I use this method. If there is a single space between div, like <div> </div> :empty doesn't work.
div.abc { border: 1px solid red; height:50px; }
div.abc:empty{display:none;}
<div class="abc"></div>
<hr/>
<div class="abc"> </div>
As of November 2021 impossible without JavaScript. There is no trim in CSS (yet except in FireFox
Note this example will also hide divs that have pseudo class content
document.querySelectorAll(".abc")
.forEach(div => div.hidden = div.textContent.trim() === "")
// alternative if you want to use a class:
// div.classList.toggle("hide",div.textContent.trim() === "")
div.abc { border: 1px solid red; height:50px; }
div.pscontent:after { content: "Also will be hidden"}
div.abc:empty{display:none;}
<div class="abc"></div>
<hr/>
<div class="abc"> </div>
<hr/>
<div class="abc pscontent"></div>
To handle pseudo class content we can do this:
const hideEmpty = (sel, testPseudoContent) => {
const elems = document.querySelectorAll(sel)
elems.forEach((elem,i) => {
const text = [elem.textContent.trim()]
if (testPseudoContent) {
["before", "after"].forEach(ps => text.push(window.getComputedStyle(elem, ps).getPropertyValue("content").trim()))
}
elem.hidden = text.join('').length === 0;
})
};
hideEmpty('.abc')
hideEmpty('.def.pscontent', true)
div.abc {
border: 1px solid red;
height: 50px;
}
div.def {
border: 1px solid green;
height: 50px;
}
div.pscontent:after {
content: "Don't hide this"
}
<div id="div1" class="abc"></div>
<hr/>
<div id="div2" class="abc"> </div>
<hr/>
<div id="div5" class="def pscontent"></div>
Your code does work but in the near future because the Specification has changed to make :empty consider white spaces
Note: In Level 2 and Level 3 of Selectors, :empty did not match elements that contained only white space. This was changed so that that—given white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents—elements which authors perceive of as empty can be selected by this selector, as they expect. ref
Until then, there is a Firefox solution using -moz-only-whitespace
div.abc { border: 1px solid red; height:50px; }
div.abc:-moz-only-whitespace {display:none;}
div.abc:empty {display:none;}
<div class="abc"></div>
<hr/>
<div class="abc"> </div>
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 this html code:
<div class="productWarp">
<div class="clear"></div>
<div class="productLine" ></div>
<div class="clear"></div>
<div class="productLine" ></div>
</div>
css:
.productWarp .productLine {
background-color: #DFDDDD;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
.productWarp .productLine:nth-of-type(2)
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
This choosing the second child of productWarp(first productLine) and not the second productLine,so it acting Exactly as nth-child selector
<div class="productWarp">
<div class="clear"></div>
<div class="productLine" ></div>//this one is choose
<div class="clear"></div>
<div class="productLine" ></div>//this one should be choose
</div>
any idea what wrong here?
:nth-of-type() looks at an element's type, not its class. In this case, all your elements are of the type div, which is why :nth-of-type() works exactly the same as :nth-child().
If you have only two .productLine elements, use the following selector to style your second one instead:
.productWarp .productLine ~ .productLine
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
Otherwise you'll just have to go by :nth-child() indices, in this case :nth-child(4), or override styles for subsequent .productLine elements by adding more rules repeating the ~ .productLine part as necessary.
This take in consideration the clearing div.
.productWarp div.productLine:nth-of-type(4n)
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);
}
);