I´m trying to do something similar to this: https://stackoverflow.com/a/8539107/1743291
I want to give the first element of a class a different style from the other elements using the same class.
So I created something like this following the workaround from the post above:
.kn-menu > .control.has-addons {
border: 1px solid red;}
.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}
But this is not working for me.
Can anyone tell me what is wrong with my approuch?
Thanks!
You can use the first-of-type pseudo class:
.test {
width: 200px;
height: 100px;
margin: 10px;
background-color: green;
}
.test:first-of-type{
background-color: red;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
suppose you have three divs within a parent section like this:
<section class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</section>
And on your CSS you have styles for those divs with class name "child":
.parent .child{
border:0;
}
You can give particular properties to the first div like this:
.parent .child:first-child{
border: 1px solid #000000;
}
Or select child what you want:
.parent .child:nth-child(3){
border:1px solid #ffffff;
}
if i understand it correct you just want to difference the first element. I think that solution can be use pseudo class first-of-type
HTML
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
CSS
.item {
color: red;
font-size: 32px;
}
.item:first-of-type {
color: blue
}
https://codepen.io/smil3cz/pen/GRjYyyL
Related
I am loading global CSS styles but I need them to not affect one part of the page and all of its subcomponents. There are some old information but is there a solution now when :not() is a Level 4 selector?
Codepen example that is not working: https://codepen.io/LaCertosus/pen/PoaYeRj
I have a HTML structure that is not predefined, I do not know how many and what elements are around and inside the "red" element.
Visual example
<div class="parent">
<div class="_filler">
<div class="_filler">
<div class="block">
Should be red
</div>
</div>
</div>
<div>
<div class="child-lime">
<div class="block">
Should be lime
</div>
<div class="_filler">
<div class="block">
Should be lime
</div>
</div>
</div>
</div>
</div>
.parent:not(.child-lime) {
.block {
background: red;
}
}
/* Block is an example, in reality we don't know the class name */
.block {
height: 100px;
width: 100px;
background: lime;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
I have tried different combinations with :not() selector but with no luck. It works when I don't need to include all children.
add this into CSS file
.parent > ._filler .block {
background: red;
}
.child-lime .block {
background: lime;
}
remove this from CSS file
.parent:not(.child-lime) {
.block {
background: red;
}
}
Your question seems to be missing some details, but here's what gets you close (assuming you can't touch the underlying HTML)
.parent {
div:not(.child-lime .block) {
background: red;
}
.block {...}
}
There's an un-classed div element that turns red...but since your comments seem to require not touching the underlying HTML and using the :not pseudo, that's probably as close as you can get.
This is what I have :
Less :
.parent{
&-caption{
color:red;
}
&:first-child{
border: solid blue !important;
&-caption{
color:blue !important;
}
}
}
Html
<div class="parent">
<div class="parent-caption">One</div>
</div>
<div class="parent">
<div class="parent-caption">Two</div>
</div>
<div class="parent">
<div class="parent-caption">Three</div>
</div>
Problem : But the first child's caption's color does not become blue.
Is this possible in LEss ? I know it's possible in Sass.
Thanks
Your less compiles to the following css:
.parent-caption {
color: red;
}
.parent:first-child {
border: solid blue !important;
}
.parent:first-child-caption {
color: blue !important;
}
As you can see, that isn't really valid css. There is a playground on the less css site that allows you to preview how your css code is compiled.
I would recommend you just do something like this
.parent .parent-caption {
color: red;
}
.parent:first-of-type .parent-caption {
color: blue;
}
<div class="parent">
<div class="parent-caption">One</div>
</div>
<div class="parent">
<div class="parent-caption">Two</div>
</div>
<div class="parent">
<div class="parent-caption">Three</div>
</div>
You can do this in Less like so:
.parent {
&-caption {
color: red;
}
&:first-of-type &-caption{
color: blue;
}
}
The explanation for this feature is on the features page of Less css under the Parent Selectors heading.
I thought :first-of-type will effect the first-of-type which in my case is
<div class="box">I am the first box in div.center...</div>
If I remove the <div class="top"> the CSS works and adds the green-top-border.
But I need <div class="top">, so why is it not working if <div class="top"> is there?
FIDDLE
<div class="main-wrap">
<div class="center">
<h3>Lorem Ipsum</h3>
<div class="top">XXX XXX XXXX</div>
<div class="box">I am the first box in div.center. Why no top border?</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
.box {
width:100%;
height:30px;
margin:10px 0;
background-color:orange;
}
.main-wrap .center div.box:first-of-type {
border-top:4px solid green;
}
.box {
position:relative;
border-bottom:4px solid green;
}
When you have div.top there, that becomes the first div element within its parent. :first-of-type only looks at the type of element; div.box:first-of-type really means select div:first-of-type only when it has the class .box, and not the first div.box.
To reach the first div.box, use an adjacent sibling selector:
.main-wrap .center div.top + div.box {
border-top:4px solid green;
}
The CSS declaration is over-qualified. If this design pattern repeats through out the site then using the following sibling selector is just as good and cleaner:
.top + .box {
border-top: 4px solid green;
}
The browser looks at the declaration from right to left, so will scan for all the .box classes and then scan for the .box classes that are associated .top. By adding the additional classes, the browser is forced to re-scan 2 more times before applying the declaration styles.
i have html like this:
<div class="container">
<div class="foo">Foo!</div> <!-- if this is red... -->
<div class="bar">Bar!</div>
</div>
<div class="container">
<div class="foo">Foo!</div> <!-- ...i want this blue... -->
<div class="bar">Bar!</div>
</div>
<div class="container">
<div class="foo">Foo!</div> <!-- ...and this red. -->
<div class="bar">Bar!</div>
</div>
and i want every second "foo" to have a blue background, the other foo:s red.
i have tried:
.container .foo:nth-child(odd)
{
background-color: red;
}
.container .foo:nth-child(even)
{
background-color: blue;
}
i have also played some with nht-of-type but i can't get it to work.
In the test above they all are "odd" since all of them get blue.
What am i doing wrong?
You had your nth-child selector in the wrong spot:
.container:nth-child(odd) .foo
{
background-color: red;
}
.container:nth-child(even) .foo
{
background-color: blue;
}
jsFiddle example
Your selectors are a little off.
They should be on the parent.
.container:nth-child(odd) .foo
{
background-color: red;
}
.container:nth-child(even) .foo
{
background-color: blue;
}
I am having trouble getting :last-child to work in my situation.
HTML:
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="action">Some other content</div>
CSS:
div.topic {
border-bottom: 1px solid black;
}
div.topic:last-child {
border-bottom: none;
}
JSFiddle
The last div.test still has the border at the bottom.
The problem I think is that the border-bottom: none applies to the very last div which is div.action and not to the last div of class test.
How can I solve it?
You will have to update your markup in order to achieve desired result. Wrap your unknown items in a wrapper, eg:
Working DEMO
<div id="list">
<div class="topic">Some content</div>
<div class="topic">Some content</div>
<div class="topic">Some content</div>
</div>
<div class="action">Some other content</div>
then use this CSS:
#list .topic {
border-bottom: 1px solid black;
}
#list .topic:last-child {
border-bottom: none;
}
I'd suggest using first-child, not last-child.
div.topic {
border-top: 1px solid black;
}
div.topic:first-child {
border-bottom: none;
}
This works with your current HTML, and is more cross-browser compatible.