Wednesday 15 November 2017

SASS/CSS: :first-child selector not working





I'm trying to style a certain


in my markup with CSS/SASS, and I'm clueless as to why it's not applying the rules. This
is my markup:





// something
here



Title



Slogan

class="col-xs-1">
// I want to access this



class="col-xs-1">

class="col-xs-1">






And
this is the SASS I'm trying to use for
it:



div.addon-header {

color: white;
> div.col-sm-9 > div.col-xs-1:first-child {

background-color: black;
padding-left: 0px !important;

}
}


If I
remove the :first-child selector in my SASS, it's working, but
obvious for every

not just the
first one, which is not what I want.



I also
tried playing around and doing something
like



div.addon-header {

color: white;
> div.col-sm-9 > div.col-xs-1 {

&:first-child {
background-color: black;
padding-left: 0px
!important;
}

}
}


or



div.addon-header
{
color: white;
> div.col-sm-9 {
>
div.col-xs-1:first-child {
background-color: black;
padding-left:
0px !important;
}

}
}


or using
:nth-child(1) instead. Nothing works. I'm clueless. Somewhere
else in my SASS, I have the
following:



.tab-content
{
>.tab-pane:first-child > form > div.row > div {
//
rules here
> div.picture-container {
// rules here

}
}
>.tab-pane {
// rules here

}
>.tab-pane:nth-child(4) > form {
// rules here

}
}


Which is
working just fine. So I really don't get what I'm doing wrong in the first example.
Anyone able to help?


itemprop="text">
class="normal">Answer




col-xs-1 need to
wrap row because this block is not first element. First element
is h2


No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...