Assuming the html structure below I need to override a style in the app-dropdown__trigger__icon class based on the existence of an ancestor with class ancestor-module. I'm using ember so the app-dropdown__trigger__icon and the ancestor-module live in separate modules i.e. I cannot easily reference the ancestor from the child's scss. Is there a way to achieve conditional styling based on an ancestor's class?
<td id="ember1249" class="lt-cell align-center ember-view">
<div id="ember1254" class="ember-view">
<div class="ancestor-module">
<div id="ember1259" class="ember-view">
<div id="ember1264" class="__app-dropdown__aa494 ember-view">
<div id="ember1274" aria-owns="ember-basic-dropdown-content-ember1269" tabindex="0" data-ebd-id="ember1269-trigger" role="button" class="app-dropdown__trigger ember-basic-dropdown-trigger ember-view">
<span class="app-dropdown__trigger__icon">
<i id="ember1275" aria-hidden="true" class="fa fa-house ember-view"></i>
</span>
</div>
<div id="ember-basic-dropdown-content-ember1269" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>
</div>
</div>
</div>
</div>
</td>
I don't know how ember.js affects this, but in normal CSS, I would do it like this:
.app-dropdown__trigger__icon {
color: green;
}
.ancestor-module .app-dropdown__trigger__icon {
color: red;
}
As far as I know, SCSS does not affect this solution.
Related
Is there a way to tell Tailwind: If a parent has a certain class then show a certain HTML element, if not hide it? Or can this not be done in Tailwind?
<body>
<div class="hidden">Hello</div>
</body>
<body class="show">
<div class="block">Hello</div>
</body>
Yes!
You can use and arbitrary value on the parent, if you conditionally add the class it will show the children like so:
Demo: https://play.tailwindcss.com/0pCtnVrAh7
<!-- hidden -->
<div class="">
<div class="hidden item">Hey!</div>
</div>
<!-- Show if class "[&_.item]:flex" is added-->
<div class="[&_.item]:flex">
<div class="hidden item">Hey!</div>
</div>
<!-- Coming soon -->
<div class="group should-show">
<div class="hidden group-[&.should-show]:block">Hey!</div>
</div>
In a future update, hopefully tailwind will allow us to use the group modifier to style based on if the group has an additional class.
No. Tailwind is a css framework. To use conditional statements, you can either use Tailwind with javascript or php or any other languages.
Actually, there is.This is a css solution, but it can be achieved in tailwind as well:
.hidden {
display:none
}
.parent .hidden {
display:block
}
<div class="hidden">Text that doesn't show up</div>
<div class="parent">
<div class="hidden">
Text is visible
</div>
</div>
html
I have
<parentdiv class="a">
<child1 class="b"></child1>
<child2 class="b"></child2>
<child3 class="b"></child3>
</parentdiv>
Using css can I apply different background-images property already present on class b on each individual child divs(I'll have fixed no. of child divs), thanks
Link to refer my usecase
<mat-horizontal-stepper _ngcontent-c1="" class="mat-stepper-horizontal
ng-tns-c4-0" role="tablist">
<div class="mat-horizontal-stepper-header-container">
<div class="mat-horizontal-stepper-header-container">
<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c4-0"
role="tab" ng-reflect-icon="number" ng-reflect-index="0" ng-reflect-selected="true"
ng-reflect-active="true" ng-reflect-optional="false" tabindex="0"
id="mat-step-label-0-0" aria-controls="mat-step-content-0-0" aria-selected="true">
<div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
<div ng-reflect-ng-switch="number" class="mat-step-icon">
<span>1</span>
</div>
<div class="mat-step-label mat-step-label-active mat-step-label-selected"></div>
</mat-step-header>
<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c4-0"
role="tab" ng-reflect-icon="number" ng-reflect-index="0" ng-reflect-selected="true"
ng-reflect-active="true" ng-reflect-optional="false" tabindex="0"
id="mat-step-label-0-0" aria-controls="mat-step-content-0-0" aria-selected="true">
<div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
<div ng-reflect-ng-switch="number" class="mat-step-icon">
<span>2</span>
</div>
<div class="mat-step-label mat-step-label-active mat-step-label-selected"></div>
</mat-step-header>
<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c4-0"
role="tab" ng-reflect-icon="number" ng-reflect-index="0" ng-reflect-selected="true"
ng-reflect-active="true" ng-reflect-optional="false" tabindex="0"
id="mat-step-label-0-0" aria-controls="mat-step-content-0-0" aria-selected="true">
<div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
<div ng-reflect-ng-switch="number" class="mat-step-icon">
<span>2</span>
</div>
<div class="mat-step-label mat-step-label-active mat-step-label-selected"></div>
</mat-step-header>
</div>
</mat-horizontal-stepper>
This is a Stepper module in Angular material2 and my objective is to set different individual background-images for each of the
three mat-step-icon(12,23,34)Line nos. classes present in each using css3 properties(mat-step-icon class
which has backgound-image property which I need to override)
What i tried
I had give backgound-image in mat-step-icon class but it will get applied for all the mat-step-icon classes , is there a way so that for each of the mat-step-icon different background-image property can be applied
To target an element with the same class, one can in this case use the nth-child() selector.
The nth-child() is a sibling selector, so in your pseudo code it will look like this
.b:nth-child(1) {
background-image: url( path1);
}
.b:nth-child(2) {
background-image: url( path2);
}
But in your production code, it is not the .mat-step-icon class/element itself that we need to target with the nth-child selector, it is its parent, like this
.mat-step-header:nth-child(1) .mat-step-icon {
background-image: url( path1);
}
.mat-step-header:nth-child(2) .mat-step-icon {
background-image: url( path2);
}
I have one angular component with the html as following:
<!-- dynamic content generated runtime -->
<div class="test">
<div class="testinside">
HELLO
</div>
</div>
Now I want to style for one class in the part of [dynamic content generated], so my scss as following:
:host {
display: inline-block;
vertical-align: middle;
> .test > .testinside {
color: red;
}
> select {
display: inline;
}
> .combobox-container > .input-group {
color: red;
}
}
[.combobox-container > .input-group] is the css setting for the dynamic content.
However, it seems that the css for dynamic content is not effected :( (the css for static content is OK)
The dynamic content is as following:
<common-combobox _ngcontent-hdj-67="" ...>
<!-- dynamic content generated runtime -->
<div class="combobox-container combobox-selected">
<input type="hidden" name="" value="2">
<div class="input-group">
<input type="text" autocomplete="off" placeholder="Anrede" class="combobox">
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span>
</div>
</div>
<div _ngcontent-hdj-35="" class="test">
<div _ngcontent-hdj-35="" class="testinside">
HELLO
</div>
</div>
</common-combobox>
Can anyone help me to show the points I missed?
Use :host /deep/ to force child component use style
https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-
Here is Live example from Angular, see hero-detail.component.css
Update from #Joseph Briggs
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
In short, ::ng-deep will replace :host /deep/until next notification from Angular.
Set the viewEncapsulation for that component to None.
I want to style the following CSS classes; is there any short styling technique for this?
.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */
I am looking for something like:
.test-%d% { }
I want to dynamically create many test-* classes with different numbers and common styles.
Update
here is my actual situation
<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
<div style="clear: both;"></div>
</div>
</div>
When user click the above button then same structure will clone and append to the end of the form
so the form will be as
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
</div>
<div id="form_container-1">
<div class="placeholder">Add your form fields here</div>
</div>
</div>
the css class form_container-[%d] will be created dynamically by jquery.
so i want to add style to this class.
also it would be great if you share optimised code for cloning the structure with
different ID.
Please do let me know if you still have doubt.
thanks
You can use an attribute selector.
div[class*='test-'] {...}
I think #Ed W have the right solution BUT I have an extra idea while is not straight forward is shorter than what you have. And will help to make different testing that is waht I think you want... fiddel http://jsfiddle.net/ncubica/2sj9W/
css
.test-1,
.test-2,
.test-3,
.test-4,
.test-5{
color:#F60;
display:block;
}
.test-5{
color:blue
}
html
<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>
span five will be in blue color... so you can override the class you want to test and play with it.
Also you can use selectors like
HTML
<div>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span class="test-1">I'm red</span>
</div>
CSS
div > span{
color:pink;
display:block;
}
div > span.test-1{
color:red;
}
and the last span will be red. I hope this help.
My two cents...
Is there a way to set a css selector's style to be the same as another selector (class in this case) that was earlier defined without javascript?
specifically, my problem is applying bootstrap button classes (btn-small, btn-mini) to different buttons without changing it manually. The reason is that I am replacing the buttons with javascript and since I don't want to rewrite a lot of the code, I want the class to be exterior from the html
so instead of having
<div class="mini">
<a class="btn btn-mini"> some_link </a>
</div>
and
<div class="small">
<a class="btn btn-small"> the_same_some_link </a>
</div>
I could do
<div class="link small">
<a class="btn"> the_same_some_link </a>
</div>
and using css do
.small a{
import .btn-small
}
.mini a{
import .btn-mini
}
could this be achieved with css or scss/sass?
You can do this with Sass by using selector inheritance via #extend.
A solution with SCSS:
.small a{
#extend .btn-small;
}
.mini a {
#extend .btn-mini;
}
Edit: as noted in the comments, you also need to:
#import "twitter/bootstrap"