If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like :
<div id="1" ></div>
<div></div>
<div></div>
And CSS :
#1 :hover < body > div
{
//Here I change the things
}
Use the general sibling combinator
#yourId:hover ~ div
{
color:red;
}
Also note that Id's must begin with a letter. W3 ID Attribute
Example
Put a wrapper around them, then put the hover on the wrapper.
<div class="wrapper">
<div class="element">foo</div>
<div class="element">bar</div>
<div class="element">baz</div>
</div>
.wrapper:hover .element {
color: red;
}
Example: http://jsfiddle.net/EB92r/
Related
css doesn't select the first class
:not(:first) doesn't work because .callout is wrapped by other container
.callout:not(:first) {
color: red;
}
<div class="d-flex">
<div class="flex-fill">
<div class="callout">
Text A
</div>
</div>
<div class="flex-fill">
<div class="callout">
Text B - only this set color red
</div>
</div>
</div>
Select the .callout element whose parent is not the :first-child of its parent element
.flex-fill:not(:first-child) .callout {
color: red
}
Or just revert the logic and target the :last-child
.flex-fill:last-child .callout {
color: red
}
Or target the .callout inside the second parent element, no matter how many .flex-fill siblings you have
.flex-fill:nth-child(2) .callout {
color: red
}
Codepen example
Anyway, I don't recommend to use this kind of selectors or to rely on a specific markup structure because this approach can easily cause maintainability problems as the code grows and, if possible, I'd suggest to place instead a specific class for this purpose on the right element.
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
I have div tag for which a data-type attribute is associated. I want to apply different styles depending on data-type is set or no.
<div data-type="type1">Hello, World!</div>
Can I check if this attribute data-type is set or no in css/less ? This question is solved with this.
But, if I apply this data-type attribute only to the parent div, can I use this attribute for all the child div tags as well.
For instance,
<div data-type=`type1`>
<div id="newDiv"> </div>
</div>
In my CSS, I want to apply different styles for #newDiv depending on whatever type (data-type) is set to its parent. I don't want to specify the data-type attribute to the child div as well. How do we do this in CSS ?
You can use :not([data-type]) to select any element that does not have the attribute data-type set regardless of the values used.
Basic working example:
div:not([data-type]) {
color: red;
}
<div data-type="type1">Hello, World!</div>
<div>Hello, World!</div>
Alternatively, you can do the opposite and use [data-type] to select anything with the data-type attribute set regardless of the value
Working example:
div[data-type] {
color: red;
}
<div data-type="type1">Hello, World!</div>
<div>Hello, World!</div>
If you want to target a child div whose parent div has the data-type attribute set the you can use something like this:
div[data-type]>h1 {
color: red;
}
<div data-type="type1">Hello, World!
<h1> How are you?!</h1>
</div>
<hr>
<div>Hello, World!
<h1> How are you?!</h1>
</div>
This also can be reveresed based on your selector preference to target the child elements of parent elements which do not have the data-type attribute set.
div:not([data-type])>h1 {
color: red;
}
<div data-type="type1">Hello, World!
<h1> How are you?!</h1>
</div>
<hr>
<div>Hello, World!
<h1> How are you?!</h1>
</div>
If you have more complex structures you can make use of the wildcard * selector to build selectors that match very broad patterns. The letters represent the depth of the tree on which the element resides with aaa being a direct child and bbb being a grandchild...etc
Basic Example:
[data-type] * h1,
[data-type] h1 {
color: red;
}
<div data-type="type1">
<h1> aaa</h1>
</div>
<hr>
<div>
<h1> aaa</h1>
</div>
<hr>
<div id="test" data-type="type1">
<div>
<h1> bbb</h1>
<div>
<h1> ccc</h1>
</div>
</div>
<h1 class="wow"> aaa</h1>
<div>
<h1 class="wow"> bbb</h1>
</div>
</div>
<hr>
<div id="test">
<h1 class="wow"> aaa</h1>
<div>
<div>
<h1> ddd</h1>
</div>
<h1 class="wow"> ccc</h1>
</div>
</div>
If you find a pattern in your data-type value, yes, you can:
/* 1. Attribute value starts with "type" */
div[data-type^="type"] {
/* Styles */
}
/* 2. Attribute value contains "type" */
div[data-type*="type"] {
/* Styles */
}
Works for: type1, typex, typeaskdasd, etc...
Works for: abctypexyz, typexyz, etc...
I'm trying to select the first element in the body with class .box but excluding those inside the class .topbar.
I was using this approach :not(.topbar)>.box and is selecting all the elements .box excluding the one inside .topbar but I just want the first one.
I know that I can select it in an easier way but I'm wondering how could I do it that way...
Note: the number of elements are not fixed, so .topbar could exist or not...
Example:
<body>
<div class="topbar">
<div class="box">
...
</div>
</div>
<div class="box"> <!-- Just want to select this one -->
...
</div>
<div class="box">
....
</div>
</body>
Thanks!
I think you can divide this up into two cases:
1) like in your example above, topbar is the first child and box is the second child
2) if topbar doesn't exist, then box is the first child
.topbar + .box, body > .box:first-child {background:red;}
Here is a more robust way of doing it.
Consider a more generalized version of the original HTML snippet:
<div class="topbar">
<div class="box">In the topbar...</div>
<div class="box">In the topbar...</div>
</div>
<div>temp</div>
<div class="box">Just want to select this one...</div>
<div class="box">a second one....</div>
<div>temp</div>
<div class="box">a third one....</div>
<div>temp</div>
<div class="box">a third one....</div>
and apply the following CSS:
body > div.box
{
background-color: beige;
}
body > div.box ~ div.box
{
background-color: pink;
}
See demo at: http://jsfiddle.net/audetwebdesign/Rufcc/
The first rule selects all the div.box elements that are a child of body and applies a background color.
The second rule then selects all the div.box elements after the first one and then overwrites the background-color to some default value (could be transparent).
The main advantage of this approach is it can pick out the first div.box element regardless of how many other elements are before it.
.topbar + .box { background:red; }
<div id="main-content">
<div>
<div>target me
<div>don't target me</div>
</div>
</div>
<div>
<div>target me too
<div>don't target me</div>
</div>
</div>
</div>
I've tried this:
#main-content div>div {
}
But this ALSO targets the divs saying "don't target me" I wish not to target those divs.
Of course we can use Id's or classes, but the point is to declare a general rule for all.
Please advice.
Just refine the selector a bit to enforce the hierarchy: #main-content > div > div
http://jsfiddle.net/zXaLU/
As a note, when using structural selectors it's nice to reference non-generic tags.
Example: #main-content > NAV > UL is more meaningful than #main-content > DIV > DIV
If you want styles only to apply to the outer of the two divs, you need to use two style definitions. The first sets the style for the div targeted and the second for the inner div not to be targeted:
#main-content div>div {
/* set some styles */
}
#main-content div>div>div {
/* reset the styles defined before */
}
In general the inner div (not targeted) inherits all the styles of its parent div, so in order to nullify that effect, you have to explicitly reset all those styles again.
EDIT
After all comments: If "targeting" does not include usual CSS inheritance, Tim Medora's answer is more suitable. My answer tried to account for inheritance as well.
How [dooes one] properly select [the specified] elements?
The "proper" way would be to give the items you want to select a class that is indicative of their status:
<div id="main-content">
<div>
<div class="someclass">target me
<div>don't target me</div>
</div>
</div>
<div>
<div class="someclass">target me too
<div>don't target me</div>
</div>
</div>
</div>
...and then you can simply use the class selector:
.someclass {
...styles...
}
But if you're unable to modify the markup, you can still use the child selector chain:
#main-content > div > div {
...styles...
}