This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I have an accordeon in which is build like this:
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
</div>
CSS build like this:
.panel{
.panel-heading{}
.panel-content{}
}
QUESTION:
when panel-content is collpase/collapse in i need to change my css in the panel-heading .
Is it even possible when they are on the same level?
It's possible to target elements coming after, at the same depth level, but not before. With this HTML (switched elements):
<div class="panel">
<div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
<div class="panel-heading"></div>
</div>
You could have done this:
.panel {
.panel-heading {}
.panel-content {
&.collapse.in + .panel-heading {
// Changes here
}
}
}
A better way to do it (IMO) would be to use your collapse class on the container:
<div class="panel collapsed">
<div class="panel-heading"></div>
<div class="panel-content"></div>
</div>
And the Sass:
.panel {
.panel-heading {}
.panel-content {}
&.collapsed {
.panel-heading {
// Changes here
}
}
}
But I'm perfectly aware this is not always possible, due to framework restrictions.
This is possible, but not in the way you HTML is structured right now. You can target siblings like so:
.bother + .sister {
color: red;
}
This will result in any .sister elements right next to .brother elements to have red text. You can also use ~ instead of + so it's not a close sibling, but instead one that's simply further down the tree, but still a sibling. The problem is, this only works one way. So there's no way for the .panel-content to look back and see if the siblings above it match the selector.
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
I start to run out of ideas. I'm using flexbox inside flexboxes, and somehow even tho somewhere else on my page I use it, here I'm not able to reach "h1 .class" or "p .class".
My HTML:
<div class="corediv">
<div class="coreimg">
<i class="fas fa-hand-holding-usd"></i>
</div>
<div class="coretext">
<h1>TEXTTEXTEXT</h1>
<p>TEXTTEXTEXT</p>
</div>
</div>
I want to select those particularly because I want to have no space between header and paragraph. Thus I tried to put margins to 0.
With following CSS:
h1 .coretext {
margin-botton: 0px;
}
p .coretext {
margin-top: 0px;
}
And so to ensure it wasn't managing to affect h1 and p, I also added some "color: red" and "font-size: x-large;".
But nothing seems to be able to reach thoses h1 and p.
Obviously, when I directly calls h1 or p with:
h1 {
color: red;
}
It works.
Any insight on this? I've been trying quite everything I found online and since english isn't my native langage, I might have been taping the wrong keyword somehow, because I hardly believe I'm the first one to encounter this.
Thank you in advance for your time :)!
A couple of issues with your current code. First of all this selector h1 .coretext will target any children of a <h1> element with the class of coretext.
There was also a typo contained in your code margin-botton - I'm not going to insult your intelligence, I'm assuming this was just a mistyped character, but it will have been causing you issues.
To target elements that are inside the element with the classcoretext you can use the following selectors:
.coretext h1 {
margin-bottom: 0px;
}
.coretext p {
margin-top: 0px;
}
<div class="corediv">
<div class="coreimg">
<i class="fas fa-hand-holding-usd"></i>
</div>
<div class="coretext">
<h1>TEXTTEXTEXT</h1>
<p>TEXTTEXTEXT</p>
</div>
</div>
I have 10 classes with the same start of name (i.e: .ota-1st, ota-2nd... and so on) but all have different background-color.
I want to apply to those classes with same properties.
I remember once I saw some code like .ota-{margin-top:20px}, kind of that.
Is it possible?
Using the attribute selector. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
div[class*="ota-"] {
color: red;
}
<div class="ota-1">yep</div>
<div class="ota-2">yep</div>
<div class="ota-">yep</div>
<div class="foo">nope</div>
<div class="ota">nope</div>
<div class="asdf-ota-1">nope</div>
I have a lot of the same elements on a page that is not under my direct control (so i can't change the HTML). This might look like this:
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
...
<div class="item">This text should be black</div>
I want to write a css rule that targets all elements with class item that have an id.
I can do
#brand_one, #brand_two, ... { color:red; }
But the id's go into the hundreds, so that's not an option.
What i'm looking for is a rule something like this:
.item[id] { color:red; } / .item# { color:red; }
I know this is possible in Javascript, but does this exist in CSS?
Yes, this is possible using CSS attribute selectors:
.item[id] {
/* any elements with a class .item and an ID attribute */
}
Yes, this exists. In you case you should use:
div[id*="brand"] { color: red; }
This selects all divs with an id that contains brand and colors it red.
Edit: You can also, to make sure it only targets ids with brand_ in the start of the id-name, use the following:
div[id^="brand_"] { color: red; }
This will avoid that other divs in the future that have an id that contains brand will also be targeted.
Edit 2: To make it even MORE specific, you can target only ids that are following the class="item":
div[id^="brand_"].item { color: red; }
This targets all divs with brand_ in the beginning of the id and have item as a class.
You can try using css attribute selector:
div.item {
color: black;
}
div.item[id^='brand_'] {
color: red;
}
div.code {
text-transform: uppercase;
}
div.code[id^='brand_'] {
color: blue;
}
<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
<div class="item">This text should be black</div>
<div class="code">This text should be in caps</div>
<div class="code" id="brand_three">This text should be in caps and blue color</div>
Here, [id^='brand_'] refers to id starting with brand_. There are also $(ends with) and *(contains) expressions.
We can use
.item[id^="brand"]{
color:red;
}
^= indicates "starts with". So we can search id which starts with "brand".
CSS [attribute^=value] Selector
The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
So in your case ;
<style>
[id^="brand"] {
color:red;
}
<style>
Refer to:
w3schools
Try it yourself
Here's another way to do it.
<style type="text/css">
.item:not([id='']) {
color:red;
}
</style>
But it assumes you can set id='':
<div class="item" id="">This text should be black</div>
Not sure how this would work when id is unspecified as in your case.
This question already has answers here:
:first-child not working as expected
(5 answers)
CSS selector for first element with class
(23 answers)
Closed 5 years ago.
I'm wondering why the following CSS fiddle is not just turning off the up arrow on the first child and not any other DIVs.
<div id="activeitemslist" class="">
<div class="ind_item">
<div class="ind_updn">
<span class="fa fa-arrow-up"></span>
<span class="fa fa-arrow-down"></span>
</div>
</div>
<div class="ind_item">
<div class="ind_updn">
<span class="fa fa-arrow-up"></span>
<span class="fa fa-arrow-down"></span>
</div>
</div>
</div>
CSS
#activeitemslist{width:100%;border:1px solid red}
#activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important }
.ind_item > DIV{display: inline-block;text-align: center;vertical-align: middle}
https://jsfiddle.net/vvc0a4gx/
Hi.
Where is the problem?
Let's try explain essential part of your CSS rule: #activeitemslist DIV:first-child.
It looks for a div which is first child of his parent and parent must be inside element with id="activeitemslist".
According to this both up arrows fit in your rule #activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important } so both are not displayed.
Solution
To refer just to first child div of element with id="activeitemslist" CSS rule should looks like #activeitemslist > div:first-child.
So to not display first up arrow in exemplary fiddle use follow CSS rule (there is no need to use !important):
#activeitemslist > div:first-child span.fa-arrow-up {
display: none;
}
Updated code fiddle from the question with the solution.
Sources
You can read more about CSS3 selectors on e.g. W3Schools page.
Cheers
I changed the CSS here
#activeitemslist .ind_item:first-child SPAN.fa-arrow-up {display:none !important }
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 7 years ago.
This is my html code:
<div class="role-main">
<div class="abc">
</div>
<div class="bca">
</div>
<div class="test">
</div>
<div class="test">
</div>
<div class="test">
</div>
</div>
And this is the css part:
.role-maine .test:first-of-type {margin-left:0px}
.role-maine .test {margin-left:30px;}
So I do I assign de margin-left:0px for the first class, which has the name "test" ?
The selector that you are looking for seems to be :first-child, like:
.role-main .test:first-child { margin-left: 0; }
In this case and to refactor it, you could also do:
/* .role-main .test:first-of-type {margin-left:0px}
Not needed anymore */
.role-main .test:not(:first-child) { margin-left: 30px; }
EDIT: In complement to the #Popnoodles answer, you name classes was different indeed. My code is fixed.
It's not working because you have got typo in your code. Your div has got in html class role-main but in CSS you call it .role-maine.
only JS solution will help you here.
var el = document.getElementsByClassName('test')[0];
el.style.marginLeft = "0px";
http://jsfiddle.net/z0jbpnaq/
this might be helpful to you all - CSS select first element with a certain class