I have this HTML:
<div class="row-fluid list-item-main-euvou-entradas">
<div class="span1 list-item-main-euvou-entradas-colorcode green"></div>
<div class="span1 list-item-main-euvou-entradas-rank">1</div>
<div class="span1 list-item-main-euvou-entradas-votes">Votos</div>
<div class="span9 list-item-main-euvou-entradas-content">
some link
<p>some text...<p>
</div>
</div>
I need to select this class "span1 list-item-main-euvou-entradas-colorcode green" using also this classes in the selector "row-fluid list-item-main-euvou-entradas".
Ive tried something like this, but does not work:
.row-fluid .list-item-main-euvou-entradas .span1 .list-item-main-euvou-entradas-colorcode .green {
some css code;
}
Any clue on this one?
Best Regards,
You need to remove the spaces between the class:
.row-fluid.list-item-main-euvou-entradas .span1.list-item-main-euvou-entradas-colorcode.green {
some css code;
}
so for the parent div (2 classes)
.row-fluid.list-item-main-euvou-entradas
and the child (3 classes)
.span1.list-item-main-euvou-entradas-colorcode.green
you can try this:
CSS CODE
div.row-fluid.list-item-main-euvou-entradas div.span1.list-item-main-euvou-entradas-colorcode.green {
/*some css code*/
color:red;
}
Related
So I am building a website using Angular.
I then have some code that looks something like this:
<div class="main">
<div class="container">
<app-name>
<div class="app-child-div"></div>
</app-name>
</div>
</div>
And I am told that the app-name name can actually change when deployed. So I am not entirely sure that the name will remain the same. However, using SCSS, how can I target the app-child-div with CSS ?
Right now I am doing something like this:
.main {
.container {
app-step-0 {
.app-child-div {
background: green;
}
}
}
}
But that doesn't seem to do the trick. So is there anything I can do?
Add some attribute (e.g. class) that will identify your element.
E.g. add class for it:
<div class="main">
<div class="container">
<app-name class="app-name-wrapper">
<div class="app-child-div"></div>
</app-name>
</div>
</div>
Then use this .app-name-wrapper in CSS
I have frequent bundling together of css classes like this:
<div class="row z-depth-2 gradient-background">
... Blah
</div>
I have these three classes: row z-depth-2 gradient-background used together in more than 200 places. How can I introduce a single class for these three taken together?
I don't mind CSS or SASS. One other problem is that row and z-depth-2 are defined in materialize.css which I don't wanna touch. So I can't simply extend these classes in SASS like so:
.input-group {
#extend .row, .z-depth-2, .gradient-background
}
So I want to be able to do something like this:
<div class="input-group">
... Blah
</div>
Why not simply use the three classes as one selector like this .row.z-depth-2.gradient-background. It will allow you to select elements that have these 3 classes (it can have more of course) :
div {
margin:10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {/* pay attention as there is no spaces between the classes*/
background: red;
}
<div class="row z-depth-2 gradient-background">
<!-- Select this one -->
</div>
<div class="row gradient-background">
</div>
<div class="row z-depth-2">
</div>
<div class="row gradient-background z-depth-2 more-class">
<!-- Select this one -->
</div>
Usefull links to get more details :
https://css-tricks.com/multiple-class-id-selectors/
Using two CSS classes on one element
UPDATE
If you want to use a new class that will later be replaced with these 3 ones, you can use a small jQuery script in order to do what you need, like this :
//select all element with class input-group
$('.input-group').each(function() {
$(this).removeClass('input-group'); //remove input-group
$(this).addClass('row z-depth-2 gradient-background'); //add the other classes
})
div {
margin: 10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {
/* pay attention as there is no spaces between the classes*/
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
</div>
<div class="class">
</div>
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
So basically I've got a setup that spits out the code in the following fashion..
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
<div class="subparent">
<div class="TARGETCLASS"></div>
</div>
</div> //close for the parent class
Now what I'm trying to do is to style "TARGETCLASS" that comes above one way and the "TARGETCLASS" that comes second in another way. I tried n-th child, but unable to achieve the result I'm looking for. There's no way to add additional classes or ID to the existing "TARGETCLASS" class. Otherwise I wouldn't be posting this question :)
Also, the "subparent" class also is same. for both the targetclass classes. That's the issue
Thanks in advance for taking your time to answer this question for me.
Cheers!
Looks like you've got some mal-formed tags in your html. And nth-child should work just fine. Also, make sure you place the nth-child selector on the subparent class, and not TARGETCLASS. It's common to mis-place the child selector. Try this:
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">
first-child
</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">
second-child
</div>
</div>
</div>
<style>
.parent .subparent .TARGETCLASS {
background-color:#f00;
}
.parent .subparent:nth-child(1) .TARGETCLASS {
background-color:#0f0;
}
</style>
fiddle: https://jsfiddle.net/8ejxokuj/
I would use nth-of-type selector like so:
.parent{}
.parent > .subparent {} //targets both subparents
.parent > .subparent:nth-of-type(2) {} //targets the second subparent
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the second subparent
The nth-of-type() selector enables you to style a specific element amongst a series, in this case we targeted the second .subparent then specified the child we needed.
I hope this helps!
It seems, it is working by the nth child.
it is about how childrens are called. Not like "Ask parent to find nth child, but ask child, how far is he from parent"
.parent .subparent:nth-child(1) {background: #FEE; color:RED;}
.parent .subparent:nth-child(2) {background: #EEF; color:blue;}
<div class="parent">
<div class="subparent">
<div class="TARGETCLASS">aaa</div>
</div>
<div class="subparent">
<div class="TARGETCLASS">bbb</div>
</div>
//close for the parent class
</div>
In Bootstrap 3 I am able to do the follow (for semantic markup):
.div1 {
.make-xs-column(12);
}
.div2 {
.make-xs-column(12);
}
Example HTML:
<div class="div1">
<!-- Stuff Goes Here -->
</div>
<div class="div2">
<!-- More Stuff Goes Here -->
</div>
Within inline class definitions I can change the order of div1 and div2 by doing:
<div class="div1 col-xs-push-12">
</div>
<div class="div2 col-xs-pull-12">
</div>
Is it possible to change the column ordering with LESS mixins? Or is this feature not currently available? Would it be good practice to do something like this?:
.div1 {
.make-xs-column(12);
.col-sm-push-12;
}
.div2 {
.make-xs-column(12);
.col-sm-pull-12;
}
Edited: I meant to ask about xs columns rather than sm. Should I do pull and push on sm+ devices and reverse the order of my markup?
It is the same story as with .make-*-column(), i.e. there're .make-*-column-offset .make-*-column-push and .make-*-column-pull mixins.