I need to select specific DIV's without selecting children/nested DIV's within them, using only CSS.
There are two DIV's I want to select individually. These are the DIV's containing the text:
image-content (1) and
image-content (2)
.home_image_widget-2 > div:first-child div:first-child {
background-color: gold;
}
<div class="home_image_widget home_image_widget-2">PARENT DIV (wrapper)
<div class="image-content">image-content (1)
<div class="imageWidget_img"> imageWidget_img (1)</div>
<div class="home_image_widget_caption"> home_image_widget_caption (1)</div>
</div>
<div class="image-content">image-content (2)
<div class="imageWidget_img"> imageWidget_img (2)</div>
<div class="home_image_widget_caption"> home_image_widget_caption (2)</div>
</div>
</div>
With CSS, when I try .home_image_widget-2 > div:first-child div:first-child {}, it only selects the DIV for imageWidget_img (1), but I need its parent instead.
I have spent a few hours on this with no success, so for all you CSS Ninja's, slice and dice me up a solution. Thanks!
not prefect.
.home_image_widget-2 > div {
background-color: gold;
}
.home_image_widget-2 > div div{
background-color: white;
}
<div class="home_image_widget home_image_widget-2">PARENT DIV (wrapper)
<div class="image-content">image-content (1)
<div class="imageWidget_img"> imageWidget_img (1)</div>
<div class="home_image_widget_caption"> home_image_widget_caption (1)</div>
</div>
<div class="image-content">image-content (2)
<div class="imageWidget_img"> imageWidget_img (2)</div>
<div class="home_image_widget_caption"> home_image_widget_caption (2)</div>
</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 {
}
I'm newer to CSS, and after searching google I'm still having a hard time getting the :last-child selector to work.
HTML:
<div class="A">
<div class="B">
<div class="C"></div>
</div>
<div class="B">
<div class="C"></div>
</div>
<div class="B">
<div class="C"></div>
</div>
</div>
CSS:
.A > .B > .C {
margin-bottom: 8px;
}
.A > .B > .C:last-child {
margin-bottom: 0px;
}
My goal is I want the first two .C divs to have a bottom margin, but the last .C div should not have a margin. However, :last-class isn't being registered - all 3 .C divs have a bottom-margin of 8px.
I've also tried variations of :last-child on different classes, and the child selector vs no child selector
I'm not sure what I'm doing wrong / what I need to do to set the last .C class margin-bottom to 0px.
Edit: I'm actually able to get the above working in codepen.io... below is my actual code, which I can't get to work correctly.
<div class="A" ng-repeat="component in components">
<div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="B" ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
<span class="C">
<img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
</span>
</div>
</div>
This will repeat for the number of components, a max of 4 components.
Edit 2:
This was solved by trying different things that people below suggested. I changed the span to a div, then realized that angular repeats the Class A div. Below is my final html and css:
HTML:
<div class="A">
<div class="B" ng-repeat="component in components">
<div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="C" ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
<div class="btn btn-status-sections">
<img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
</div>
</div>
</div>
</div>
CSS:
.A .B .C {
margin-bottom: 8px;
}
.A .B:last-child .C {
margin-bottom: 0px;
}
Your C divs are all just single children of the B divs. So every single one will have a margin of 0.
You want to add a margin to the C that's inside the last B. So
.A > .B:last-child > .C {
margin-bottom: 0px;
}
Alternatively, you can rearrange your html and keep the css as you defined it as follows:
<div class="A">
<div class="B">
<div class="C"></div>
<div class="C"></div>
<div class="C"></div>
</div>
</div>
I see you want to apply css on you div having class "C" under "A". for this case you don't need to bother Class "B".
For example if you have parent class. you are able to access nth depth child. like I tried.
<div class="A">
<div class="B">
<div class="C">2</div>
</div>
<div class="B">
<div class="C">2</div>
</div>
<div class="B">
<div class="C">3</div>
</div>
Here is the CSS
.A > div > div {
background-color:yellow;
}
.A > div:last-child > div:last-child {
background-color:red;
}
https://jsfiddle.net/kyaLh19n/
if you have look at this image what I did. I did apply CSS on all childs inside class A and then override the last one.
Hope I am able to help you .
With your code you can use .A > .B:last-child > .C and set margin-bottom:0.
See the below Snippet:
.A {
border:1px solid red;
}
.B > .C {
margin-bottom: 8px;
background-color:lightpink;
color:white;
}
.A > .B:last-child > .C {
margin-bottom: 0px;
}
<div class="A">
<div class="B">
<div class="C">1</div>
</div>
<div class="B">
<div class="C">2</div>
</div>
<div class="B">
<div class="C">3</div>
</div>
</div>
Thank you everyone!
I needed to do a combination of what people suggested.
First was changing the span to a div.
Second was adding a wrapper div above the angular repeated div, which became Class A.
Third was using .A .B:last-child .C in my css.
I also learned that posting the actual code instead of a basic example helps more.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I'm not sure if this can be done entirely with CSS (imperative), but it's halfway working at the moment. I have this current HTML setup:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div>
<div class="image"></div>
</div>
</div>
My current CSS hides all of the child elements of ".content" that don't have a class.
.content > *:not([class]):first-child {
display:block;
}
Of the remaining 3 visible class child elements of ".content", I need to hide them all except the first child element that has the grandchild element with the ".image" class. This is the CSS I have, but it's not working:
.content > *:not([class]):not(.image):first-child {
display:block;
}
It's imposible on CSS. You tryed not show parent element by attribute of child. CSS so does not work. But you can small js for this:
document.querySelector(".image").parentNode.style.display = "block";
.content>div {
display: none;
}
<div class="content">
<div>
<div class="image">1</div>
</div>
<div class="text">2</div>
<div class="text">3</div>
<div>
<div class="button">4</div>
</div>
<div>
<div class="image">5</div>
</div>
</div>
Andrey’s answer is good, however if you don’t want to use JS I think you will need to have a class on the intermediary children as well since the entire tree to the element you want must be visible. That is, if any parent of the element you want to show is hidden then the children will be too. Something like this might do:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div class="visible">
<div class="image"></div>
</div>
</div>
.content > * {
display: none;
}
.content > .visible {
display: block;
}
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.
I'm using pure css for my website. The problem is, that the boxes have a weird offset, that is definied nowhere The boxes don't move even when I set padding and margin to zero. This causes the last box to move in the second row.
HTML:
<div class="pure-u-4-24 outer">
<div class="inner-ib inner"></div>
</div>
<div class="pure-u-5-24 outer">
<div class="inner-ib inner"></div>
</div>
<div class="pure-u-11-24 outer">
<div class="inner-ib inner"></div>
</div>
<div class="pure-u-4-24 outer ">
<div class="inner-ib inner"></div>
</div>
CSS:
.inner {
background-color: rgba(44, 62, 80, 0.75);
}
.outer {
padding-top: 10vh;
}
.inner-ib{
height: 90vh;
}
How the website looks
Put everything inside the pure-g container for your columns to work correctly..
http://codeply.com/go/rVcX2Bhpko
<div class="pure-g">
..
</div>