Having a span containing an ng-repeat I was wondering if it is possible to apply a CSS class to all but first elements of it.
For example,
<span ng-repeat="row in element.Parameters track by $index" class="awesome-css-class">
{{element.Parameters[$index]}}
</span>
My CSS class is
.awesome-css-class {
margin-left: 10px;
}
I tried with this method but apparently it doesn't work
.awesome-css-class ul:not(:first-child){
margin-left: 10px;
}
Any suggestions?
try this:
<span ng-repeat="row in element.Parameters track by $index" ng-class="{ 'awesome-css-class': $index != 0 }">
{{element.Parameters[$index]}}
</span>
You added a wrong ul in your syntax:
.awesome-css-class:not(:first-child) {
margin-left: 10px;
}
<div class="awesome-css-class">Element</div>
<div class="awesome-css-class">Element</div>
Apply the class only to the first element:
https://docs.angularjs.org/api/ng/directive/ngClass
<span ng-repeat="row in element.Parameters track by $index" ng-class="[$index===0 ? 'awesome-css-class' : '']">
{{element.Parameters[$index]}}
</span>
Alternatively, use pure CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child
.awesome-css-class:first-child
{
background:red;
}
.awesome-css-class:not(:first-child) is what you want.
This will select all element with class .awesome-css-class except those which are first child
.awesome-css-class:not(:first-child) {
color: red;
}
<span class="awesome-css-class">1111</span>
<span class="awesome-css-class">2222</span>
<span class="awesome-css-class">3333</span>
<span class="awesome-css-class">4444</span>
<span class="awesome-css-class">5555</span>
Related
I want to do a margin style for mat-slide-toggle-bar which is in a specific parent element mat-slide-toggle with class name parent-element.
Here my Html:
<mat-slide-toggle _ngcontent-ng-cli-universal-c397=""
class="parent-element mat-slide-toggle parent-element mat-accent mat-checked mat-disabled ng-untouched ng-pristine"
ng-reflect-form="[object Object]" id="mat-slide-toggle-1"><label class="mat-slide-toggle-label"
for="mat-slide-toggle-1-input">
<span class="mat-slide-toggle-bar">
<input type="checkbox" role="switch" class="mat-slide-toggle-input cdk-visually-hidden"
id="mat-slide-toggle-1-input" tabindex="-1" disabled="" aria-checked="true">
<span class="mat-slide-toggle-thumb-container">
<span class="mat-slide-toggle-thumb"></span>
<span mat-ripple="" class="mat-ripple mat-slide-toggle-ripple mat-focus-indicator"
ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="true" ng-reflect-centered="true"
ng-reflect-radius="20" ng-reflect-animation="[object Object]">
<span class="mat-ripple-element mat-slide-toggle-persistent-ripple"></span>
</span>
</span>
</span>
<span class="mat-slide-toggle-content"><span style="display: none;"> </span> text</span></label>
</mat-slide-toggle>
What I did in style file but dosn't work :
.parent-element .mat-slide-toggle-bar {
margin-left: 80px;
}}}
You can try this:
.mat-slide-toggle-bar {margin-left: 80px !important;}
!important will take precedence over most other rules.
The first answer to the linked question gives more details about it:
What is the order of precedence for CSS?
I solved it by this code in the scss of my parent component :
.parent-element .mat-slide-toggle-bar {
margin-left: 20px !important;
}
I have a movie card where the content is dynamic. I'm trying to select the first child DIV of the left-side-bar, however, since the content is dynamically generated, the background-color is changed to all divs.
#left-side-bar div:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
The :first-child selector is intended, like the name says, to select the first child of a parent tag.
But in your example there is a tag as a parent element on the div. So if you apply nth-of-type to it, you will solve your problem. So this example will work as follows.
#left-side-bar a:nth-of-type(1) .card-sb {
background:red;
}
#left-side-bar .card-sb:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
Add an Id to your div, then refer to it to change the attribute of that specific element.
<div class="card-sb" id="CardSb">
then refer to it in your style sheet:
#CardSb {background-color: #e50914}
or try this:
/* Selects every first element among any group of siblings */
#left-side-bar a:nth-child(1n) {color: #e50914;}
I've got a menu with 3 levels of deepness. It starts with the categories, then the subcategories, and after all, the final links. Some of these links are already in the second or even the first level, but that's not a problem. The menu is working fine.
The problem is that I'm trying to make it look fancy, so I added to each div a class that designates the menu level. You can see the full Angular template here. Mind that these classes are the "lvl0", "lvl1", "lvl2":
<div class="menu-container">
<div class="row header">
<img class="logo" src="../../../assets/menu-header.PNG">
</div>
<div class="row menu-btn">
<div class="inner-menu-btn" (click)="openMenu()">
<span class="menu-span" [#menuStringAnim]="active">MENU</span>
<i class="fa fa-bars menu-icon" [#menuIconAnim]="active"></i>
</div>
</div>
</div>
<div class="menu-list" [#menuListAnim]="active">
<div class="row row-fix lvl0" *ngFor="let category of getCategories()" (click)="openCategory(category)">
<div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-top-level">{{ category?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl0 == category.key">
<br>
<div class="row row-fix lvl1" *ngFor="let subcategory of getSubcategories(category.key)" (click)="openSubcategory(subcategory)">
<div class="little-menu-bar-midlvl"></div>
<span class="menu-second-level">{{ subcategory?.title?.toUpperCase() }} </span>
<div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
<br>
<div class="row row-fix lvl2" *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key)" (click)="openUrl(thirdLevel)">
<div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
<span class="menu-third-level">{{ thirdLevel?.title?.toUpperCase() }} </span>
</div>
</div>
</div>
</div>
</div>
</div>
So these classes are very simple. I'm not very good at CSS (I prefer designing logic rather than designing), and maybe I'm doing some stupid thing here:
.lvl0 :hover{
color: orange;
}
.lvl1 :hover{
color: orange;
}
.lvl2 :hover{
color: orange;
clear: both;
}
So the behavior works nice for first level, but as you can see, all the rows with the second level get highlighted instead of just the one I'm hovering on:
Same happens with the third level.
Do you have any idea on what I'm doing wrong? I'm adding the Angular tag just in case it has something to do with my template code. Thank you!
The problem is that you have applied the style to your div and as the divs are nested, the styles will cascade and turn everything inside it the colour - you can try to apply the styles directly to the spans to avoid this. Also I have removed the space before your hover colon
.lvl0:hover>span { /* leave hover on div but style the span */
color: orange;
}
.lvl1:hover>span {
color: red;
}
.lvl2:hover>span {
color: green;
}
<div class="lvl0">
<span>test 0</span>
<div class="lvl1">
<span>test 1</span>
<div class="lvl2">
<span>test 2</span>
</div>
</div>
</div>
The :hover is basically propagating down to other levels. Do not use CSS on the parent directly. Instead, use it on something like span etc.
Check pen here to solve your issue. In your case, you can have <div> tag too instead of the span which closes there and is basically a sibling of next level.
.lvl:hover {
//common for all
color: orange;
}
I need the style to alternate when classes are nested in a repeating pattern. Sadly right now, all the code does is override based on the order of the CSS and not the order of the HTML.
In the example below, each word needs to be the color it names. This needs to work for an indefinite number of nestings (could be a crazy huge number of nestings), and also needs to work when other CSS styles are applied, which means that the HTML cannot be changed. Also, there is no guarantee that there won't be anything between those elements which means they won't be direct parents all the time (So the > selector will not work).
Anyone know how to do this? (Or if it is even possible?)
span {
color: black;
}
.foo a {
color: red;
}
.bar a {
color: green;
}
<html>
<body>
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<strong>black green</strong>
</span>
<strong><br>black red</strong>
</span>
<strong><br>black green</strong>
</span>
<strong><br>black red</strong>
</span>
<strong><br>black green</strong>
</span>
<strong><br>black red</strong>
</span>
</body>
</html>
By putting class within a class, the proper way of calling it in CSS is through the > operator.
If the CSS is as such ( see fiddle or below), there will be a yellow and green element. This is because the CSS is only at parent/first level. I put a new line of CSS below and you see 4 red elements because it only reached until the second level CSS. The rest will follow the parent elements because they do not have any style. Therefore the closest parent that have a style defined in CSS is .bar > .foo a, resulting in red for the remaining 3 elements.
span {
color: black;
}
.foo a {
color: yellow;
}
.bar a {
color: green;
}
.bar > .foo a {
color: red;
}
Html code:
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<strong>1black green</strong>
</span>
<strong><br>2black red</strong>
</span> <strong><br>3black green</strong>
</span> <strong><br>4black red</strong>
</span> <strong><br>5black green</strong>
</span> <strong><br>6black red</strong>
</span>
http://jsfiddle.net/de9ppead/
I'm using CSS/SASS to style a validity message. The message is not nested within what I'm accessing.
For example my JavaScript adds an error class to the input box if it's not valid. I want block visible attributes to change further down the page.
// when no error
input#user_tags_attributes_0_tagname
// then
div.tagname-available { display: block; } // NOT NESTED
// and
div.tagname-unavailable { display: none; } // NOT NESTED
// when error
input#user_tags_attributes_0_tagname.error
// then
div.tagname-available { display: none; } // NOT NESTED
// and
div.tagname-unavailable { display: block; } // NOT NESTED
In theory I should be able to access the elements without having to write JavaScript to perform this. Possibly if CSS has a ROOT document variable like JavaScript's $(document) then I could do.
input#user_tags_attributes_0_tagname {
$(document) > div.tagname-available { display: block; } // NOT NESTED
$(document) > div.tagname-unavailable { display: none; } // NOT NESTED
}
And for the HTML
<table>
<tr>
<td width="200px">
<span class="pull-right vf-labels">Choose your Tag ID</span>
</td>
<td>
<input class="error" data-validate="/users/checktagname" id="user_tags_attributes_0_tagname" name="user[tags_attributes][0][tagname]" type="text">
</td>
</tr>
<tr>
<td>
</td>
<td>
<span class="text-primary" style="font-size: small;">Check Availability</span><br />
<div class="tagname-available">
<span class="glyphicon glyphicon-ok text-success" style="margin-left:-20px;margin-right:4px;"></span>
<span class="text-success" style="font-size: small;">Available</span>
</div>
<div class="tagname-unavailable">
<span class="glyphicon glyphicon-remove text-danger" style="margin-left:-20px;margin-right:4px;"></span>
<span class="text-danger" style="font-size: small;">Not Available</span>
</div>
</td>
</tr>
</table>
Possibly I could use the :root selector for CSS?
You should be able to do this with the sibling selector.
// when no error
input#user_tags_attributes_0_tagname +
.tagname-available { display: block; }
input#user_tags_attributes_0_tagname +
.tagname-unavailable { display: none; }
// when error
input#user_tags_attributes_0_tagname.error +
.tagname-available { display: none; }
input#user_tags_attributes_0_tagname.error +
.tagname-unavailable { display: block; }
The W3 Standard doesn't include reverse reference in CSS. Nor is there a way to access another CSS attribute that is not either a sibling or child. The only way to access CSS attributes in this way is the JavaScript.