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
Related
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.
http://jsfiddle.net/m7qLdstp/1/
<style>
:not(div p), p{
color: red
}
</style>
<p>This is a paragraph that should be red.</p>
<div><p>This is a paragraph that should not be red.</p></div>
Is it possible to use the css :not selector to (in this case) turn all <p> color red, except for any <p> instead a <div>?
I ran a few different variations on jsfiddle but cannot get it to work?!
The following will change the color of all <p> elements that are not direct descendants of a <div>:
:not(div) > p{
color: red;
}
Demo fiddle
You could just target them separately
p{
color: red
}
div p{color:black}
fiddle
it works because div p is more specific than p
According to CSS-Tricks, :not() selector can take only a "simple selector", defined as:
a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector
but:
may not contain additonal selectors or any pseudo-element selectors.
However, as other answers suggest, there are ways you could work around this issue and accomplish the behavior at least in this example case and other simple cases.
Hope you can help me with this CSS trick.
Basically what I need is this kind of CSS
if 'container' has sibling 'mySibling' {
#myDiv{
}
}
if 'container' has no sibling {
#myDiv{
}
}
For this HTML
<div id="mySibling"></div>
<div id="container">
<div id="myDiv"></div>
</div>
sibling sometimes will not be present, and I need different css for myDiv in these cases
Any help would be appreciated, I tried doing + and ~ selectors but I don't think I have proper logic.
You can do something like this:
#mySibling + #container #myDiv {
background-color:blue;
}
Here is a fiddle showing it off: http://jsfiddle.net/Lzq3S/
Note, I've changed the ids to classes in the fiddle just to show the two sets of div elements, but you get the idea...
This breaks down to myDiv that is a child of container that is a sibling of mySibling.
First off, make sure your html is correct; in your example, you forgot to specify whether you're using an id or a class! Possible options for your html:
<div id="container">
<div class="mySibling"></div>
<div class="myDiv"></div>
</div>
or
<div id="container">
<div id="mySibling"></div>
<div id="myDiv"></div>
</div>
For the sake of your example, we'll use id's, even though some would say it's better practice to use classes
Now for the CSS.
The + and ~ selectors operate in slightly different ways. The + selects adjacent siblings, while the ~ selects all siblings. Because CSS doesn't handle logic quite the same way as actual programming languages, you can't check to see if a container holds a certain element before applying styles, but you can use the sibling selectors to style elements that are next to certain other elements.
My suggestion:
.container #myDiv {
/* Your styles for #myDiv */
}
.container #mySibling + #myDiv {
/* Your styles for #myDiv it is next to #mySibling.
Will override the styles a */
}
You can check out an example here: http://jsfiddle.net/8r2TZ/. Note, I specified "myDiv" as a class, because I used it more than once, and my CSS reflects that.
If you do need to have a CSS rule for each case without relying on overriding, it's still possible, since there's a selector for elements with no siblings:
#mySibling + #container > #myDiv {
}
#container:only-child > #myDiv {
}
(You can even achieve compatibility with old IEs by using :first-child in lieu of :only-child since #mySibling comes first.)
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