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 }
Related
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 4 months ago.
:has() selector is not working as expected. is there any issue in syntax or code? CSS isn't reflecting in output.
Can any one suggest me required changes here to get CSS worked?
<html>
<head>
<style>
div.class2:has(div.class3:has(span.class4:contains('SampleText')))+div.class5 div.class6 li.class7{
display:none;
}
div.class2:has(div.class3:has(span.class4:contains('SampleText'))){
background-color: azure;
}
</style>
</head>
<body>
<div class="class1">
<div class="class2">
<div class="class3">
<span class="class4">SampleText</span>
</div>
</div>
<div class="class5">
<ul class="class6">
<li class="class7">hello world</li>
</ul>
</div>
</div>
</body>
</html>
Maybe this would help:
div.class2:has(div.class3 span.class4) + div.class5 ul.class6 li.class7{
display:none;
}
div.class2:has(div.class3 span.class4){
background-color: azure;
}
It is not the same as you tried to do, but :contains selector is not supported and :has cannot be nested. Also, you probably meant instead of div.class6, the ul.class6 element. You can select elements that contain certain text with classes and ids.
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>
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
<div id='one' class="one">1</div>
So the div above has a class and ID. I have added inline styling in the header section:
<style>#one {color: red;}</style>
In the style.css file I have the following code:
#one.one {color: blue;}
The colour of the text in the div is showing up as blue. Why is that? I was under the impression that inline styling has the highest specificity.
An inline style is style inlining in the html like this :
#one.one {color: blue;}
<div id='one' class="one" style="color:red">1</div>
If you add the style in the style tag, it is considered like in css file, so it's the last found which is applied
Inline styling means putting the style inside the element tag. Try this.
<div id='one' class="one" style="color: red">1</div>
CSS stands for Cascading Style Sheet. That means it "Cascades" or is designed to be overwritten be the last thing to write to it.
If you had red as the last color in your script, it would be red instead.
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
I am facing an issue when using the :last-child pseudo selector.
I have the following markup:
<div class="apply_container">
<form class="margin">
<div class="apply_inn border">
<span>Tell me why you want the job?</span>
</div>
<div class="apply_inn">
<span>Some other details</span>
</div>
<div class="apply_inn location">
<span>Apply at a particular location</span>
</div>
<div class="form-actions">
<button type="submit" class="pull-right btn btn-info">
Submit
</button>
</div>
</form>
</div>
And apply these styles:
.apply_container .apply_inn {
border-bottom: 1px dashed #E6E6E6;
margin: auto;
padding: 18px 0;
width: 790px;
}
.apply_container .apply_inn:last-child {
border:none;
}
My goal is to prevent the last div.apply_inn from being styled with a bottom-border like the rest of the div.apply_inns. The style does not seem to get applied. Can anyone explain what is happening?
Here is the original fiddle of my problem. As well as a simplified fiddle demonstrating the issue.
The problem is that the div with class .apply_inn is not the last-child within its parent. The CSS last-child pseudo-class operates as follows:
The :last-child CSS pseudo-class represents any element that is the
last child element of its parent.
When ready very literally, it will only apply to an element that is the last child within its parent. It does not take into consideration the context you (mentally) create when you add the additional class selectors to it.
When applying the pseudo-class the browser doesn't understand the context created by the selector. Basically, its checking that the element matches the selector .apply_container .apply_inn, then asking the question, "Is this the last child within the parent?". It asks this question without any consideration of the aforementioned selector. In your case, the answer is no since there is another div after the last div.apply_inn.
In your example, the div with the class form-actions is actually the last child.
You can only use the last-child selector if it is the last child of it's parent container - although it was the last child with that class name it wasn't the last child of the container
https://developer.mozilla.org/en-US/docs/CSS/:last-child
Here is a fiddle showing your code with the last child style applied
http://jsfiddle.net/QSeU2/7/
target for border-top and remove the first-child's border-top
http://jsfiddle.net/btevfik/QSeU2/6/
last-child doesn't work.
Related: Using the last-child selector
Any reason you don't want to use
.location {border:none;}
?