I want to draw bottom-border under some div elements inside their parent but except the last two, knowing that number of child element is changeable:
<div id="parent">
<div>
One
</div>
<div>
Two
</div>
<div>
Three
</div>
<div>
Four
</div>
</div>
Is it possible to select all child elements except the last two?
In this case, something like
#parent > div:not(:nth-last-of-type(-n+2)) {
border-bottom: 1px solid red;
}
JSFiddle
:nth-last-child should do the job (combined with :not).
#parent >:not(:nth-last-child(-n+2)) {
border-bottom: solid black 1px;
}
<div id="parent">
<div>
One
</div>
<div>
Two
</div>
<div>
Three
</div>
<div>
Four
</div>
<div>
Five
</div>
<div>
Six
</div>
<div>
Seven
</div>
</div>
Related
I have a below div structure and I want to add css on first .column element, not its sibling
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
I want to add CSS only first .column that comes just after #team div. So how can I select a class for that .column not for the inner .column?
You would use the direct descendant / child combinator ">" which in effect says - target the .column class that DIRECTLY descends from the #team parent div.
In the following - I am placing a border around the targetted .column div and not around the nested children .column divs.
and if there are other divs that are siblings of that particvular div - then you could use the :first-child pseudo selector as well..
#team > .column:first-child {...}
which says - target the .column div that is a direct descendant AND the first child of the #team div.
#team > .column {
border: solid 1px red;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
The most specific selector in this case is #team>.column, with > between parent and child to make sure the nested divs which also have the .column class are not affected.
#team .column would not work in this case, since it also selects the .column divs which are nested in lower instances.
BTW: You mention "siblings", which is a bit confusing, since there are not any siblings to that element...
#team>.column {
background: yellow;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
Ok, so I think you may have confused your HTML 'parent/child' structure.
You could use
#team > .column:first-child {
}
However, I don't know if you are aware that you can add any number of classes to HTML elements. You could have many classes to easily distinguish between your components and to be able to grab hold of them with CSS or JS.
For the sake of ease, you could just add another class to the element you want to add another separate class style, as I have below.
Then you could just add CSS styling for that class.
<div class="row" id="team"> //this is parent
<div class="column main"> // a child that I've added the
// class of .main to
<div class="row"> // a grandchild
<div class="column"> // then great grandchildren
A //these are siblings
</div>
<div class="column"> //these are siblings
B
</div>
<div class="column"> //these are siblings
C
</div>
</div>
</div>
</div>
/*Then you would just add stylings for*/
.main {
}
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 4 years ago.
Check this code below:
.aaa :not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}
<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to match all .ccc element that are children of .aaa but are not children of .bbb. It means that the code above should NOT make the AQUI word be RED, but it gets RED anyway. What am I doing wrong?
There are actually elements which are not .bbb - the two divs before and after .bbb in this case. For this to work, you'll need to be more specific. You can add another class (zzz in the example), and if this class is not combined with .bbb the rule will be applied.
.aaa .zzz:not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}
<div class="aaa">
<div>
<div>
<div class="zzz bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
The not(.bbb) will match any div without the class .bbb and you have a lot of them between .aaa and .ccc that why the text is red. To do what you want you need to consider two selectors
.aaa .ccc {
font-size: 20px;
color: #FF0000;
}
/*we reset the style if children of .bbb*/
.bbb .ccc {
color: initial;
font-size:initial;
}
<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have overlooked that the .ccc is a child of components that match :not(.bbb):
<div class="aaa">
<div class="ccc"></div>
<div class="bbb">
<div> // <-- :not(.bbb)
<div class="ccc"></div>
</div>
</div>
</div>
You need to write two rules:
.aaa .ccc {
color: blue;
}
.aaa .bbb .ccc {
color: red;
}
I have a nested HTML element structure where I need to apply css styles for some condition.
Apply styles to class starts with "a-" in the .a-comp element
Ignore styles to .a-col class and its child elements which have "a-*" class
The code below works for the above scenario. But it doesn't work for other child elements which have "a-*" class.
How can I achieve that?
.a-comp :not(.a-col) [class^="a-"],
.a-comp :not(.a-col) [class*="a-"] {
color: red;
}
<div class="a-comp">
<div class="a-one">
<div class="a-col">
<div class="a-text">
Text1
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
Text 2
</div>
</div>
</div>
View on JSFiddle
Your selector matches .a-* elements that have an .a-comp ancestor, with some intermediate element that is not .a-col. However, both of your examples match that selector.
The first one has .a-one as a descendant of .a-comp and ancestor of a-text. The second one has .a-row as a descendant of .a-comp and ancestor of a-text.
One solution might be to set the appropriate children of .a-col elements not to be red.
.a-comp [class^="a-"] {
color: red;
}
.a-comp .a-col [class^="a-"] {
color: black;
}
<div class="a-comp">
<div class="a-row">
<div class="a-two">
<div class="a-text">
In a ROW
</div>
</div>
</div>
<div class="a-one">
<div class="a-col">
<div class="a-text">
In a COL
</div>
</div>
</div>
<div class="a-row">
<div class="a-text">
In a ROW
</div>
</div>
<div class="a-one">
<div class="a-something">
<div class="a-text">
In something else
</div>
</div>
</div>
</div>
I want to style(say change width or color) the div inside first child, using the classes .child and .grandchild, which are also inside other child divs, but keeping the other child div intact. Here i only able to select the first child only.
DIV.parent> DIV:first-child.grandchild {background:red;width:70px;}
.grandchild{font-size:10px;width:50px;height:50px;background:yellow;}
.child{padding:5px;}
<div class='parent'>
<div class='child'>
<div class='grandchild'>
FIRST
</div>
</div>
<div class='child'>
<div class='grandchild'>
SECOND
</div>
</div>
<div class='child'>
<div class='grandchild'>
THIRD
</div>
</div>
<div class='child'>
<div class='grandchild'>
FOURTH
</div>
</div>
</div>
you mean something like this ? jsfiddle
your question it's a bit unclear
code
.child:first-child .grandchild {border:solid 10px #000;}
.child:first-child > .grandchild{
width:200px;
background:#f22;
}
You can try with nth-child(n) selector. for example:
DIV.parent> DIV:nth-child(1) {border:solid 10px #000;}
DIV.parent> DIV:nth-child(2) {border:solid 10px #000;}
I am having trouble selecting the first and last div for the following html markup:
<div class="layout__side">
<div class="portlet-dropzone">
<div id="id1">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id2">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id1 div-->
<div id="id3">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id4">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id3 div-->
<div id="id5">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id6">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id5 div-->
<div id="id7">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id8">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id7 div-->
<div id="id9">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id10">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id9 div-->
<div id="id11">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id12">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id11 div-->
</div><!--end portlet-dropzone-->
</div><!--end layout__side-->
I am trying to select and style only the id1 div header without explicitly selecting it using the div id. I tried using the div:first-child selector, but all of the divs are being selected! This is what I tried, along with using nth-child(1)
.layout__side .portlet-dropzone div:first-child header{
padding: 10px;
border: 1px solid red;
}
The problem is that you're selecting all div descendant elements that are a first child.
In other words, the descendant div elements .portlet-borderless-container, .portlet-body, and .inner are selected (since they are descendants of .portlet-dropzone and they are the first child relative to their parent element). Since all the div elements are selected, each header element is thereby selected and styled.
You need to select the direct child div element instead (by using the direct child combinator, >). In doing so, only the div element that is a direct child of .portlet-dropzone will be selected if it is the first child.
Example Here
.layout__side .portlet-dropzone > div:first-child header {
padding: 10px;
border: 1px solid red;
}
As your title suggests, if you also want to select the last one:
Updated Example
.layout__side .portlet-dropzone > div:first-child header,
.layout__side .portlet-dropzone > div:last-child header {
padding: 10px;
border: 1px solid red;
}
It's also worth pointing out that there are :first-of-type and :last-of-type pseudo classes which will select the first/last element by type (unlike :first-child/:last-child which will select based on the index only rather than the type).
Updated Example
.layout__side .portlet-dropzone > div:first-of-type header,
.layout__side .portlet-dropzone > div:last-of-type header {
padding: 10px;
border: 1px solid red;
}
This may be useful if there are elements of varying types and you only want to target the div elements. For instance, if there was a random h1 element before the first div, like in the example above, the first div would still be selected.