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.
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.
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
I am having a problem getting the bootstrap grid to display properly. My code is as follows
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
All I see is:
grid
Anyone know what's happening here? I have all the bootstrap.css, bootstrap-theme.css, and bootstrap.js properly included. Other things such as buttons are bring properly formatted by bootstrap.
As far as I see your 2 div's are formatted as they should? (Using Boostraps md-6).
You don't need the .col-md-6 value in your div though:
<div class="container">
<div class="row">
<div class="col-md-6">Your text here</div>
<div class="col-md-6">Your text here</div>
</div>
</div>
For more information check out the official Bootstrap Documentation page on Grid Templates
For the grid view used in the documentation (grid.css) add the following CSS:
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
Modify as below
<div class="container show-grid">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
add the following css to your style sheet
.show-grid div{
border:1px solid ;
}
Bootstrap makes an "invisible" grid if you want to see it that way, if you want to make the grid visible you can do it with css either adding a background color or border, my favorite is background color:
css:
.y0 { background-color: #CCC; }
.y1 { background-color: #9FF; }
.y2 { background-color: #F9F; }
.y3 { background-color: #F99; }
.y4 { background-color: #FF6; }
.y5 { background-color: #3C3; }
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 y0">Your text here</div>
<div class="col-md-6 y1">Your text here</div>
</div>
</div>
Given the following, is there a way to target an element ONLY if it is an h3 AND it is positioned immediately inside the parent?
<style>
h3:first-of-type { color: #f00; }
</style>
Example a)
<div class="mydiv">
<h3 class="tobetargeted"></h3>
</div>
Example b)
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted"></h3>
</div>
Neither first-of-type or first-child will work because in both cases, the h3 element evaluates to true. What I want is for Example a) to be true but Example b) to be false.
So... IF the element is an H3 AND it is the first element immediately inside the parent.
Any ideas?
:first-child should definitely work out for you.
.test {
border: 1px solid black;
margin: 0 0 10px;
}
.test h3:first-child {
color: red;
}
<div class="test">
<h3>H3 - should be red</h3>
</div>
<div class="test">
<p>p</p>
<h3>H3 - should be black</h3>
</div>
Use this
h3:nth-child(1) { color: #f00; }
h3:nth-child(1) { color: #f00; }
<div class="mydiv">
<h3 class="tobetargeted">Hello</h3>
</div>
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted">Hello</h3>
</div>
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;
}