I have an element which can have an --active class added to it, via a toggle button using JS.
<div class="container">
<div class="element element--active"></div>
::after
</div>
When this class is added, I would like the ::after element to be display:none;
The following won't work,
.element--active + ::after {
display: none;
}
But why is this?
Is my alternative just adding another class to the container when element--active is added?
.element--active + ::after is the same as .element--active + *::after
So it finds an element which is a member of the element--active class. Then it finds its adjacent sibling. It doesn't have one. So it stops.
If you want the pseudo-element after .element--active then you would just use .element--active::after.
If you want the pseudo-element after .container, then you are stuck because CSS doesn't have a parent selector.
This is not working because ::after is a psuedo element of .container. Since you can't select a parent in CSS, a solution could be to add the class to .container and then removing the ::after element.
Related
I have a list of DIVs that share the same classes as follows:
<div class="content1"><div class="contentInner">Text1</div></div>
<div class="content1"><div class="contentInner">Text2</div></div>
<div class="content1"><div class="contentInner">Text3</div></div>
...
I want the first DIV with class="content1" to have a different style than the following DIVs of the same class. What is the CSS selector that can accomplish this?
Thanks
Use nth-of type selector.
.content1:nth-of-type(1){
/* your style */
}
Using first-child only works if there is no sibling element before your desired div.
See fiddle here.
CSS has a pseudo selector which is used in such scenario where you need to select the first element from similar elements i.e. :first-child
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
Example:
div.content1:first-child{
/* your css */
}
Js Fiddle Demo
Use :not and :first-child pseudo selector of CSS to give specific css to the first div.
Example:
.content1:not(:first-child) {
/* Common CSS for all divs except first div */
}
.content1:first-child {
/* CSS for first div */
}
you can use the :first-child selector. e.g
.content1:first-child{
text-decoration:underline;
}
fiddle
I am practicing my css using the hover when I notice this problem when I hover on top the color will change to blue and the middle will change to color red but when I hover to middle the middle changes the color to red but the top remains.
I tried to add a !important to the middle:hover but it didn't work. I also remove the + sign but i think it will not work since it should be on the same div for that to work.
why does the hover not working for the top div when middle div is hovered?
HTML
<div class="top">
<p> HELLO WORLD </p>
</div>
<div class="middle">
<p> HELLO PEOPLE </p>
</div>
CSS
.top:hover + .middle {
color:red;
}
.top:hover {
color:blue;
}
.middle:hover {
color:red;
}
.middle:hover + .top {
color: blue;
}
FIDDLE HERE
You cannot select a parent element in CSS unfortunately. But JavaScript can be used to resolve this problem.
Check out this for more info on selectors...http://www.w3.org/TR/CSS21/selector.html
The CSS + selector is the next sibling selector. It doesn't work on previous siblings, similar to how you can't target a parent from a child. This is because CSS works Top-Bottom, (ie parent > child, next sibling etc) and not vice versa.
This article explains why CSS doesn't have a parent selector but same logic applies for the lack of previous sibling selectors.
tldr: Bottom-Up CSS selectors are not feasible because of their performance implications in browsers.
I was wondering how I can remove display:none from all child spans
<span class="tooltip">
<span>Content goes here along with other spans</span>
</span>
.tooltip span {
display:none;
}
What I need is for the span inside of the tooltip span not to take the display none effect, I understand that I could a div for one of them instead but how I have the tooltips setup and how it works within wordpress I need to use all spans. Thanks
you most remove the 'tooltip' class
from Child spans ancestor
you can do it with JQuery
$('.tooltip').removeClass('tooltip')
I may have two types of html...
One:
<div>
<h4></h4><!--not to this-->
<p></p>
</div>
Two:
<div>
<h4></h4><!--this should be styled--->
<h4></h4>
<p></p>
</div>
All styling are the same but just border-bottom to h4 of first h4 tag only if it contains two h4 tags as in the example. How to do without changing html?
You can combine :first-child, :not() and :only-of-type pseudo-classes to achieve that.
Here you go:
h4:first-child:not(:only-of-type) {
background-color: gold;
}
WORKING DEMO.
This selector represents the <h4> element which is the first child of its parent whereas it's not the only of TYPE of elements in the children tree of the parent.
From the MDN:
The :only-of-type CSS pseudo-class represents any element that has
no siblings of the given type.
Let's go Crazy!
If the <h4> element is not the first child of its parent, we can select the first <h4> element and achieve the same effect by using :first-of-type pseudo-class as follows:
h4:first-of-type:not(:only-of-type) {
background-color: gold;
}
UPDATED DEMO.
For further details on :first-of-type vs :first-child you can refer my answer here.
you need to style the border-bottom of your 1st h4 only if the parent contains two adjacent headings
you could then style the border-top of the 2nd h4 and obtain the same effect
h4 + h4 {
border-top: ...
}
When you have one heading only, no style will be applied. If you have two or more adjacent headings, a border between them will be applied
This is what you need:
h4:first-child:nth-last-of-type(n+2)
{
color:green;
}
FIDDLE
You can use the First-child class.
I could look like this:
div h4:first-child{
CODE HERE
}
I think you are better off styling the second h4 if possible, as you would not be able to tell with CSS whether there are one or two h4's in the div.
You can do this with nth-child
div h4:nth-child(2) {
// your styles.
}
Fiddle
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj