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 {
}
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have the following structure in my project:
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A"><div>
</div>
<div class="uneditable">
<div class="B"></div>
</div>
</div>
...
</div>
I have the following restrictions with this structure:
container class must be display flex and be on column mode
super-child class must be display flex and be on row mode
uneditable class does cannot receive any styling at all, only that they have height and width 100%
What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's
I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.
Is there a way to make this dependence of height without using javascript to style the elements?
[UPDATE]
Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.
height: 0;
min-height: 100%;
This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"
... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :
example in a column since in a row should not be an issue
.super-child {
display: grid;
grid-auto-rows: 1fr;
}
.super-child > .uneditable {
border: solid;
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
... side by side :
.super-child {
display: flex;
}
.super-child > .uneditable {
border: solid;
flex:1;
/* demo purpose to resize heights */
overflow-y:scroll;
resize:vertical
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
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>
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 have content like this:
<div class="content">
<div class="row">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
How do I select the links between h1 tags foo1 and foo2?
I have tried this:
.content .row > :not(h1) a
but this selects on:
foo11
foo12
foo21
and what I want is:
foo11
foo12
Also, the number of div.row after the rows containing h1 is variable.
You essentially have a hierarchy which is not represented in hierarchical form in your HTML. The best solution is to add another level to your HTML which represents the hierarchy.
If you can't do that, and are stuck with this HTML, then you can try with sibling combinators, but in any case, you will need some way to address the foo1 and foo2 elements. That could be a class, or nth-child if you know the order, or data attribute, or anything else. This cannot be something on the <h1> element, since CSS provides no way to go "up and over". It must be a way to address the higher-level row elements containing the h1. In the below, I'll assume you have a class available. In that case:
/* Make everything after `foo1` red. */
.foo1 ~ .row a { color: red; }
/* But make `foo2` and everything after it the original color. */
.foo2.row a, .foo2 ~ .row a { color: inherit; }
<div class="content">
<div class="row foo1">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row foo2">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
The following should work:
.content .row:not(:last-child) a {
background-color: red;
}
<div class="content">
<div class="row">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
Is this kinda what you are looking for jsfiddle
?
for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
var x=document.getElementsByTagName('a')[i];
var t=x.innerHTML;
if (t=='foo11'||t=='foo12') {
x.style.backgroundColor="red"; }
}
You can do it like this with variable div's:
.content > .first ~ .row > a {color: red}
.content > .second ~ .row > a {color: initial}
<div class="content">
<div class="row first">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
foo13
</div>
<div class="row second">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
<div class="row">
foo22
</div>
<div class="row">
foo23
</div>
</div>
Here the initial keyword sets the color property to its default value and without defining additional two classes for .row's with the h1 tag inside, this can't be done in any other way with pure CSS.
I have a bunch of divs with class B following a div with class A:
<div class="B"></div>
<div class="A"></div>
<div class="A"></div>
<div class="A"></div>
<div class="B"></div>
<div class="A"></div>
I'm trying to apply a CSS rule to the last A after each B. I tried
.B ~ .A:last-of-type
but that didn't work. Is this possible?
You can't currently do this with css. The :last-of-type pseudo class works with element types such as span div etc - not with classes
Being that:
1) There is no currently no previous sibling selector
2) You can't change the structure of your markup and
3) You don't know in advance how many .A divs you have after each .B div ...
... you're out luck, CSS currently can't do this.
You can use :last-of-type selector in this case.
.A:last-of-type {
/*apply styling */
}
In your case I recommend you to group them in divs. http://jsfiddle.net/GtLWJ/
This works.
<div class="sec1">
<div class="head">Set</div>
<div class="sub">Item 1</div>
<div class="sub">Item 2</div>
<div class="sub">Item 3</div>
</div>
<div class="sec1">
<div class="head">Set</div>
<div class="sub">Item 1</div>
</div>
CSS:
.head {
font-weight: 800;
}
.sec1 .sub:last-of-type {
border-bottom: 1px solid #000;
}