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>
Related
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>
I'm trying to inherit the width of my H3 into my line break. How would I go about doing this?
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
<hr />
</div>
The easiest way would be to simply not use an <hr> tag, and instead opt for a simple underline with text-decoration: underline:
h3 {
text-decoration: underline;
}
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
Alternatively you could use border-bottom, which would allow you to increase the gap with padding-bottom:
h3 {
display: inline-block;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
Note that with the second solution, you'll want to give the <h3> tag display: inline-block so that it doesn't occupy the full line.
The solution to this is to set your <div> to have the property display: inline-block.
Adding the following CSS:
.title {
display: inline-block;
}
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>
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;
}
I need apply a style only whit content "something"
Here is an example on how you can do that :
<style>
.small {
color: #000 !important;
}
.small[value^="something"] {
font-size: 12px !important;
color: red !important;
}
</style>
<div class="small" value="soething">Lorem ipsum dolor sit amet.</div> <!-- Not working -->
<div class="small" value="something">Lorem ipsum dolor sit amet.</div> <!-- Working -->
It's as simple as that ! :)