Asking here since I can't pass a proper search query with that.
Here's a code sample:
[class*="button_type"].state_2,
[class*="button_type"]:not(.state_2):hover{
background-color:#fff;
}
Furthermore what would be the use of the :not suffix?
I cannot understand why it isn't just:
.button_type.state_2,
.button_type:hover { etc..}
[class*="button_type"] is CSS class Selector (equivalent to CSS attribute selector) means that will select all elements whose class contains at least one substring "button_type".
take a look at this example:
[class*="button_type"] {
background: red;
width: 50px;
height: 50px;
display: inline-block
}
<div class="button_type"></div>
<span class="one_button_type"></span>
<article class="button_type_final"></article>
Regarding the :not() that means it will select everything but that selector which is inside the :not()
Take a look at this example:
[class*="button_type"] {
background: red;
width: 50px;
height: 50px;
display: inline-block
}
[class*="button_type"]:not(.state_2) {
border: black solid
}
<div class="button_type state_1"></div>
<span class="one_button_type state_2"></span>
<article class="button_type_final state_3"></article>
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
First, please check my code.
<div className={styles.settingInfo}>
<header>
<h1>User ID</h1>
<p>this is for user ID</p>
<h1>Username</h1>
<p>this is for username</p>
</header>
<div>
<button type='button'>change</button>
</div>
</div>
With this code, what I'm trying to do is giving (h1)username(/h1) tag a margin-top:10px without giving className.
.settingInfo {
#include flexFullWidth;
height: 40%;
header {
#include headerStyle;
h1 {
color: colors.$BIG_TITLE;
letter-spacing: 1px;
}
}
div {
width: 35%;
padding-top: 20px;
border: 1px solid red;
}
}
I set the SCSS file like this, and was finding out how can I give a specific h1 tag a style without using className.
I know we can easily solve the problem giving just a className, but just want to figure out how can work on this differently. Thank you!
My suggestion is to just add a class but if you want to do this without it then you can use nth-child selector like so:
header h1:nth-child(3) {
margin-top: 10px;
}
You can select the first h1 using nth-child(1) in the same manner.
I'm trying to style all div elements except those in two different class groups. Everything I've tried doesn't seem to work.
The below test code should make the div with "test" text content be orange, but none of the selectors work.
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not(.ZoomBar):not(.row.heading) {
background: orange;
}
div:not(.ZoomBar, .row.heading) {
background: orange;
}
div:not(.ZoomBar),
div:not(.row.heading) {
background: orange;
}
<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div>Test</div>
You can use something like this
You cannot add unfortunately multiple class in a single not selector.
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not(.ZoomBar):not([class="row heading"]){
background: orange;
}
<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div class="heading">Heading</div>
<div>Test</div>
The problem with :not() is that it only allows one simple selector at a time. This means any of :not(div), :not(.ZoomBar), :not(.row) and/or :not(.heading). It does not accept either
a compound selector, .row.heading, which consists of two class selectors; or
a comma-separated list of multiple selectors, .ZoomBar, .row.heading.
It's worth noting however that the selectors you've tried will work in jQuery, though not CSS.
Your problem is compounded (heh) by the fact that you're looking for both kinds of exclusions in a single rule. But it's still doable; it simply means you'll need to write a slightly more convoluted rule, with two selectors to account for the two class selectors in .row.heading:
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not(.ZoomBar):not(.row),
div:not(.ZoomBar):not(.heading) {
background: orange;
}
<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div class="heading row">Heading</div>
<div class="heading foo row">Heading</div>
<div class="heading">Heading</div>
<div>Test</div>
If these are the only possible combinations of class names, you might be able to get away with simply excluding div elements with a class attribute using div:not([class]), but based on your question I suspect that this isn't the case.
For instance, notice in the above snippet that the div[class="heading"] element matches div:not(.ZoomBar):not(.row), and is therefore colored orange. If you may have elements with either class name but not both, those elements will be accounted for.
The answer is this:
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not([class*="ZoomBar"]):not([class*="row heading"]):not([class*="heading row"]) {
background: orange;
}
https://jsfiddle.net/ars9fL56/5/
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
Can i select somehow a group of elements if a class of the parent changes. Like in these example.
The parent class can be alertStateTrue or alertStateFalse.
<div id="parent" class="alertStateTrue">
<div class="childAlertStateTrue"></div>
<div class="childAlertStateTrue"></div>
<div class="childAlertStateFalse"></div>
<div class="childAlertStateFalse"></div>
</div>
.alertStateTrue .childAlertStateTrue
{
display: block;
}
.alertStateTrue .childAlertStateFalse
{
display: none;
}
.alertStateFalse .childAlertStateTrue
{
display: none;
}
.alertStateFalse .childAlertStateFalse
{
display: block;
}
Yes, you can select elements based on their parents:
.a .b {}
The above rule will select all .b elements inside the .a ones.
HINT
You can compress your CSS by grouping the selectors which have exact rules:
.alertStateFalse .childAlertStateFalse,
.alertStateTrue .childAlertStateTrue {
display: block;
}
.alertStateTrue .childAlertStateFalse,
.alertStateFalse .childAlertStateTrue {
display: none;
}
This is called a parent child relationship in CSS structure, you can do as per NOX answer.
If you want to be a more specific than below structure will help you
Use your #parent div.childAlertStateTrue
This will work fine.