I have
<li class="item itemshad edited">
<div class="itemsetting" style="">
<span class="icon"><i class="icon-home"></i></span>
<span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
</div>
</li>
<li class="item itemshad edited selected">
<div class="itemsetting" style="">
<span class="icon"><i class="icon-home"></i></span>
<span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
</div>
</li>
if the "li" has a class of the selected and edited to change the thickness of the border in input.
if that's so
.selected .edited input {
border: 2px dotted #ccc;
}
Does not work
To specify multiple classes on a single element, just join them together:
.selected.edited input
This is because the space character is a combinator that means "any descendant of"
Do this:
.selected.edited input
Removed the space character. Otherwise .edited has to be inside .selected.
It Should be
.edited.selected input {
border: 2px dotted #ccc;
}
For more info on Multiple Class / ID and Class Selectors - http://css-tricks.com/multiple-class-id-selectors/
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 need help getting the right selectors and restrictions to retrieve child elements at a certain level given the beneath bit of HTML.
I have the first element which is the li at the top.
I need to get it's children under the child ul, which have class "subtree-checkbox".
An image is attached for clarity.
Many thanks.
<li class="green checked" style="color: yellow; border: 2px solid yellow;">
<span class="accordion-heading" data-toggle="collapse" aria-expanded="true" data-target="#Smenu_0_1__1">
<span id="sp_SM_0_1" class="checkbox subtree-checkbox styled red"><input name="SM_0_1" class="subtree-checkbox styled red" id="SM_0_1" type="checkbox" iid="1" value="false" style="display: none;"></span>
Users
</span>
<ul class="nav nav-list collapse in" id="Smenu_0_1__1" style="padding-left: 60px;" aria-expanded="true">
<li>
<span class="accordion-heading" data-toggle="collapse" data-target="#Smenu_0_1__10" aria-expanded="true">
<span id="sp_SM_0_1_1" class="checkbox subtree-checkbox styled grey checked" style="color: yellow; border: 2px solid yellow;"><input name="SM_0_1_1" class="subtree-checkbox styled red" id="SM_0_1_1" type="checkbox" iid="2" value="false" style="display: none;"></span>
new subby tst3
</span>
<ul class="nav nav-list collapse in" id="Smenu_0_1__10" aria-expanded="true" style="padding-left: 20px;">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
I tried this but obviously fails.
var kiddieEls = $(SpanParent).children("input[type=checkbox]");
and this
var kiddieEls =$(SpanParent).children('ul').find("subtree-checkbox:first-child");
How would i get one or all the children elements at that level?
This is what I came up with, probably not near the best way, but it works.
I have the Parent Li in a 'LiParent', which is my starting point.
// finds the ULs under this li element
var childUL = $(LiParent).children('ul .nav-list');
// gets the first level of children (li's)
var FirstLi = $(childUL).children().first();
//use that first child to find the required spans
var ChkBoxSpanS_ToAccumulate = $(SpanAccordionchild).children('span').first()
I have the following HTML definition.
(I'm using Knockout)
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName"></span>
<span class="right" data-bind="text: measurement"></span>
<input type="checkbox" />
</li>
</ul>
I would like these to display aligned as the following
Item1 measurement1 Checkbox1
Item2 measurement2 Checkbox2
Item3 measurement3 Checkbox3
I would like this to be aligned the following way:
Column 1 is floated to the far left.
Column 3 (The input checkbox) is floated to the far right.
Column 2 is is on the far right, but to the left of Column3
I've tried working with DIVs and the float/display attributes.
I haven't been able to achieve the desired visual behavior.
How would I accomplish this?
float and text-align ?
li {
display:block;
text-align:right;
width:200px;/* whatever width you set here or in parent */
}
li :first-child {
float:left;
}
input {
vertical-align:middle;/* ? */
}
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName">item</span>
<span class="right" data-bind="text: measurement">measure</span>
<input type="checkbox" />
</li>
</ul>
One option might be to use Bootstrap's grid system — you would be able to specify the proportional width of each column. Additionally, it becomes easier to handle its responsiveness to screensize.
In your case, you might use it like this:
<div class="container-fluid">
<ul data-bind="foreach: itemList">
<li>
<div class="row">
<div class="col-xs-6">
<span data-bind="text: displayName"></span>
</div>
<div class="col-xs-3">
<span class="right" data-bind="text: measurement"></span>
</div>
<div class="col-xs-3">
<input type="checkbox" />
</div>
</div>
</li>
</ul>
</div>
See more grid examples here.
--
If you are trying to present tabular data, you might also consider using HTML tables and specifying its percentage column width.
Might I recommend a flex-box? I put a growing spacer in to push the middle column over to the right. Modifying GCyrillus' answer:
li {
display: flex;
justify-content: space-between;
width: 90%;
/* whatever width you set here or in parent */
}
li .spacer {
flex-grow: 1;
}
<ul data-bind="foreach: itemList">
<li>
<span data-bind="text: displayName">item</span>
<span class="spacer"></span>
<span class="right" data-bind="text: measurement">measure</span>
<input type="checkbox" />
</li>
</ul>
I and using addthis share plugin and have changed background color to yellow and also added bottom-border: of 1px, I want to remove the bottom border from the last a which is not working for me using following css
css
div#at4-share a:last-child
{
border-bottom: 0px solid #1f1f1f;
}
HTML
<div id="at4-share" class="addthis_32x32_style atss atss-left addthis-animated slideInLeft at4-show">
<a class="at4-share-btn at-svc-facebook" href="#">
<span class=" at4-icon aticon-facebook" title="Facebook">Facebook</span>
</a>
<a class="at4-share-btn at-svc-twitter" href="#">
<span class=" at4-icon aticon-twitter" title="Twitter">Twitter</span>
</a>
<a class="at4-share-btn at-svc-pinterest_share" href="#">
<span class=" at4-icon aticon-pinterest_share" title="Pinterest">Pinterest</span>
</a>
<a class="at4-share-btn at-svc-google_plusone_share" href="#">
<span class=" at4-icon aticon-google_plusone_share" title="Google+">Google+</span>
</a>
<a class="at4-share-btn at-svc-compact" href="#">
<span class=" at4-icon aticon-compact" title="More">More</span>
</a>
<div id="at4-scc" class="at-share-close-control ats-transparent at4-show at4-hide-content" title="Hide">
<div class="at4-arrow at-left">Hide</div>
</div>
</div>
I had tried
div#at4-share a:last-of-type
{
border-bottom: 0px solid #1f1f1f;
}
so i am not sure what is wrong
You need to use :last-of-type, because :last-child is div with text hide in this case.
div#at4-share a:last-of-type {border-bottom: 2px solid red;}
https://jsfiddle.net/4y9j0z9q/
See the :last-child too
https://jsfiddle.net/4y9j0z9q/1/
The correct selector is :last-of-type.
div#at4-share > a:last-of-type
{
border-bottom:none; /* To remove the bottom border. */
}
FIDDLE