This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 8 months ago.
imagine a html code which I cannot change. something like:
<div class="a">
<div class="aa">
<div class="aa1">
</div>
<div class="aa1">
</div>
<div class="aa1">
</div>
<div class="aa1">
</div>
</div>
<div class="b">
<div class="bb">
...
</div>
</div>...
</div>
so what I want to change is in 'aa1' s and each one should have different styling.
so in css I could write
.a .aa .aa1:first-child{
styling1:;
}
.a .aa .aa1:nth-child(2){
styling2:;
}
.a .aa .aa1:nth-child(3){
styling3:;
}
.a .aa .aa1:nth-child(4){
styling4:;
}
.a .aa .aa1:nth-child(5){
styling5:;
}
but there is lot of those 'aa1' parts. Is there a way to simplify this where I only have to specify nth-child(x) for each element?
something like:
.a .aa .aa1
{
:first-child{
styling1:;
}
:nth-child(2){
styling2:;
}
:nth-child(3){
styling3:;
}
:nth-child(4){
styling4:;
}
:nth-child(5){
styling5:;
}
}
With the current CSS (2.1) version, nesting selectors isn't possible.
You'll have to use something called a CSS preprocessor which does several things, including allowing nested selectors.
I'd recommend SASS (SCSS), and another out there is LESS. You'll need some extra things setup on your PC/Mac for automatically converting preprocessor files to regular CSS files - plenty of other questions and research points on that out there.
If you use SCSS, you can check out what its like on SassMeister so you can see what the nested selectors will look like compiled.
one possible solution would be to use the adjacent sibling selector (+) for each "aa1" class and + one for each new style
for example:
.a .aa .aa1 p {
color: black;
}
.a .aa .aa1 +.aa1 p {
color: red;
}
.a .aa .aa1 + .aa1 + .aa1 p {
color: blue;
}
.a .aa .aa1 + .aa1 + .aa1 +.aa1 p {
color: green;
}
<div class="a">
<div class="aa">
<div class="aa1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="aa1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="aa1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="aa1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
Related
HTML:
<div class="top-container">
<div class="primary-text">lorem</div>
<div class="secondary-text">lorem</div>
</div>
<div class="secondary-container">
<h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div class="info-container">
<div class="container-one">
<div class="box1">1</div>
<h3>lorem</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
</div>
<div class="container-two">
<div class="box2">2</div>
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<div class="container-three">
<div class="box">3</div>
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
</div>
<div class="info-sec">
<img src="test.png" alt="blah">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Relavent CSS:
.info-sec{
visibility:hidden;
}
.box:hover + .info-sec{
visibility:visible;
}
If I change the hover from the box to the info-container it works fine:
.info-container:hover + .info-sec{
visibility:visible;
}
But hovering using box does not work. I've also tried using display: none; and display: block;
Codepen: https://codepen.io/colton-22/pen/jOwoMxL
The + is adjacent Sibling Selector. So when you use:
.info-container:hover + .info-sec{
visibility:visible;
}
It works because info-sec is the first next sibling of info-container. But when you use:
.box:hover + .info-sec{
visibility:visible;
}
It doesn't work because info-sec is not the sibling of info-container.
According to my knowledge, there is no selector in css which works for you. So, you have to use javascript to achieve this.
I'm trying to vertically position two divs (1&2), set to 'display: inline-block'. Can't understand why vertical-align doesn't want to work?
Ps. Don't want to use flexbox...
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
.parent {
border: 1px solid red;
height: 150px;
width: 100%;
display: table;
}
.parent > * {
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div1,
#div2 {
display: inline-block;
border: 1px solid blue;
}
<div class="parent">
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
</div>
Add one more parent div and give display:table and for the immediate child set display:table-cell then give vertical-align:middle;. Please see the code.
It wasn`t working as the height of DIV hasnt been set! After setting height of DIV, vertical alignment of other one started working.
I'm trying make "the end" in the following code to appear inline with the lorem ipsum, and can't figure out how. Is it possible? I can't change the HTML structure at all. (nor can I add js, etc)
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I want it to look like this:
If you are able to make changes to the CSS, then this is an easy solution. Just use display: inline, which will make the element only take as much space as necessary (acting like a <span> element).
However, if by chance, you are unable to, then there is no way I can think of for you to achieve this given your situation.
#parent {
width: 300px;
border: 1px solid red;
}
#block1, #block2 {
display: inline;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
You need to set the two block containers to display: inline:
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
#block1, #block2 {
display: inline;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
So here is my Code :
.tagBoxContent p:first-child {
color: blue;
}
.tagBoxContent p:last-child {
color: red;
}
<div class="tagBoxContent">
<a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
<p>Lorem ipsum dolor sit amet,</p>
<p>Integer ma</p>
</div>
Why first-child dont trigger to the p tag but the last child element do? and how can i call the first p tag in this without first-child or with working first-child? I researched a lot but do not find any duplicate with the same problem.
You're using :first-child and it's not the first child. Instead, use :first-of-type.
.tagBoxContent p:first-of-type {
color: blue;
}
.tagBoxContent p:last-child {
color: red;
}
<div class="tagBoxContent">
<a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
<p>Lorem ipsum dolor sit amet,</p>
<p>Integer ma</p>
</div>
Use nth-child() to select a child not the first or last child
.tagBoxContent p:nth-child(2) {
color: blue;
}
.tagBoxContent p:last-child {
color: red;
}
<div class="tagBoxContent">
<a class="tagHeadline">with <span>'chat'</span> tagged articles</a>
<p>Lorem ipsum dolor sit amet,</p>
<p>Integer ma</p>
</div>
Say I have some divs:
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
If these boxes need to be alternate colours I need to create some CSS which basically does the following:
.box-(odd-number) {
color:#000;
}
.box-(even-number) {
color:#fff;
}
Obviously I know the above is not the correct syntax. Could some one point me in the right direction?
Thanks
You can use the nth-of-type pseudo-class, combined with the keywords odd and even:
.box:nth-of-type(odd) {
background-color:#000;
}
.box:nth-of-type(even) {
background-color:#fff;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #f00;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
You can do this using nth-child() with Even and odd rules.
.box:nth-child(odd) {
background: blue;
}
.box:nth-child(even) {
background: green;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
Or you can can do this where :nth-child(2n) represents the even and :nth-child(2n+1) represents the odd
.box:nth-child(2n) {
background: red;
}
.box:nth-child(2n+1) {
background: yellow;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
You're looking for nth-child(odd) and nth-child(even), If you don't want to apply .box classname.
[class^="box-"]:nth-child(odd) {
color:#000;
}
[class^="box-"]:nth-child(even) {
color:#fff;
}
An example: https://jsfiddle.net/8tkcuuwm/
To get this working you need a container of which you can adress the odd and even children like this. You set the class to the container and Format it's children accordingly.
By this you only have to set the class once and can exchange it if needed, without having to modify each child separately:
<style type="text/css">
.container div:nth-child(odd) {
color:#F00;
}
.container div:nth-child(even) {
color:#00F;
}
</style>
<div class="container">
<div class="box-1">Lorem ipsum dolor sit amet.</div>
<div class="box-2">Lorem ipsum dolor sit amet.</div>
<div class="box-3">Lorem ipsum dolor sit amet.</div>
<div class="box-4">Lorem ipsum dolor sit amet.</div>
</div>
See this jsfiddle:
HTML
<div class="box box-1">Hello World</div>
<div class="box box-2">Hello World</div>
<div class="box box-3">Hello World</div>
<div class="box box-4">Hello World</div>
CSS
.box:nth-child(odd) {
background-color: #336699;
}
.box:nth-child(even) {
background-color: #222;
}
Short explaination:
We added another class to the boxes, called box. This is, so we can refer to every element of this type. (My hint: use ID's for the box-1, box-2 stuff, since they appear to be unique).
Using the pseudo-class nth-child in combination with odd or even, will affect every (as you may assume) odd- or even element.
if colours should alternate depending only on the order of the div elements, (no matter the class name) then you could use div:nth-child(2n) and div:nth-child(2n + 1)
On the contrary if it depends only on the last digit of your class name (no matter if your divs are in the right order) then you could write
[class^="box"][class$="2"],
[class^="box"][class$="4"],
[class^="box"][class$="6"],
[class^="box"][class$="8"],
[class^="box"][class$="0"] { ... }
[class^="box"][class$="1"],
[class^="box"][class$="3"],
[class^="box"][class$="5"],
[class^="box"][class$="7"],
[class^="box"][class$="9"] { ... }
Use nth-child in order to achieve this.
HTML
<div class="box"></div>
<div class="box"><div>
<div class="box"></div>
<div class="box"></div>
CSS
.box:nth-child(odd) {
background-color: #000;
}
.box:nth-child(even) {
background-color: #FFF;
}