I would like to understand some behaviour I am experiencing with CSS class selection.
I am attempting to reference only css classes line-1 that are used as children of two separate parent classes. The first instance also has an additional classname. Which you can see below. Basically I need to select all of the .line-1 classes. Both have different parents .row icon explainBlah & .row icon.
index.html
<div class="row icon explainBlah">
<div class="col-sm-3 col-xs-6">
<div class="featureBox long">
<div class="title">1</div>
<div class="line-1"></div>
<div class="description">blah blah
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="featureBox long">
<div class="title">2</div>
<div class="line-1"></div>
<div class="description">blah blah
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-sm-3 col-xs-6">
<div class="featureBox long">
<div class="title">3</div>
<div class="line-1"></div>
<div class="description">blah blah
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="featureBox long">
<div class="title">4</div>
<div class="line-1"></div>
<div class="description">blah blah
</div>
</div>
</div>
</div>
<div class="row icon">
<div class="col-sm-3 col-xs-6">
<div class="featureBox"><img src="images/icons/smartphone.svg" alt="smartphone.svg" height="30">
<div class="title">Mobile</div>
<div class="line-1"></div>
<div class="description">Blah 2
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="featureBox"><img src="images/icons/wheel#2x.png" alt="wheel#2x.png" height="30">
<div class="title">Efficiency</div>
<div class="line-1"></div>
<div class="description">Blah 2 <strong> Blah 2 </strong> Blah 2
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-sm-3 col-xs-6">
<div class="featureBox"><img src="images/icons/stop#2x.png" alt="stop#2x.png" height="30">
<div class="title">No discovery</div>
<div class="line-1"></div>
<div class="description">Blah 2
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="featureBox"><img src="images/icons/frame#2x.png" alt="frame#2x.png" height="30">
<div class="title">Clarity</div>
<div class="line-1"></div>
<div class="description">Blah 2
</div>
</div>
</div>
</div>
I have managed to successfully select both child instances of the .line-1 elements as per the first example:
index.styl
.featureBox.long, .row.icon .featureBox
.line-1
max-width 160px
but I was surprised when this didn't work for the second .featureBox set of elements:
index.styl
.featureBox.long, .featureBox
.line-1
max-width 160px
Seeing as a direct reference .featureBox.long worked, why doesn't .featureBox and why do I have to use .row.icon .featureBox as in the first example?
Solution
Very simple:
.row.icon .featureBox
.line-1
max-width 180px
The inclusion of more 'specific' selectors i.e. .row.icon .featureBox.long above would invalidate .row.icon .featureBox
remove the first class selection and use only the second.
.row.icon .featureBox .line-1 {
//selects .line-1 of every .featureBox element that is a child of .row.icon
}
.row.icon .featureBox.long .line-1 {
//selects .line-1 every .featureBox element that is a child of .row.icon and has an extra class of .long
}
By including the .row.icon you're making the selector more specific so will hold a higher priority over other styles applied to the .featureBox
Why don't you simple target ".line-1" instead of going by the hierarchy, as you wish to style all the elements with class="line-1" itself.
Related
I'm created blocks in WPBakery and have the following markup generated for a block (yeah, it's really messy, I know):
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I'm trying to do is the apply padding: 0 to the first column in container-fluid (so wrapper > container-fluid > row > col-sm-12).
To do this, I have the following:
.container-fluid:first-of-type [class*=col-] {
padding: 0;
}
However, the above makes all col classes have padding: 0. How can. I only target the first col class under container-fluid?
You can literally use > selector straight from you own question:
/* You might want to be more specific after 'div',
but since it doesn't have any siblings it's sufficient */
.container-fluid > .row > div {
padding: 0;
}
Narrow down the elements to select by first-of-type and the parent class name to which it applies:
.container-fluid:first-of-type .myCustomDiv .container:first-of-type [class*=col-] {
padding: 0;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test1
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
test2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="container">
<div class="row">
<div class="col-12">
test3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My understanding is that you can't use first-of-type with class names like this. See this answer for more info:
CSS3 selector :first-of-type with class name?
Now specifically with your case you have two issues – you don't want the change applied to either siblings or children of the first col- class, right? The work around shown in the link above is that you need to apply the style to the first div with that class, but then remove that styling for subsequent instances.
To find the further children use:
.container-fluid [class*=col-] [class*=col-]
To find the siblings use:
.container-fluid [class*=col-] ~ [class*=col-]
In the snippet below I've changed the styling to font color to make it easier to see.You'll see it's only applied to the first div with a 'col-' class name, and not to its children or siblings.
.container-fluid [class*=col-] {
color: red
}
.container-fluid [class*=col-] [class*=col-] {
color: black
}
.container-fluid [class*=col-] ~ [class*=col-] {
color: black
}
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
test
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
test
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="myCustomDiv">
<div class="container">
<div class="row">
<div class="col-12">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try this:
UPDATE:
I suppose you are looking for this: ( this will select the first div from inside container-fluid which contains classes attribute that have col-sm ... if you want to select classes that contains just "col-", remove the sm
.container-fluid div[class*="col-sm"]:first-of-type {
padding: 10px;
}
I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}
I want to switch to div with class="col-md-x" depending upon the number of student object i am receiving.
E.x: Sample
if i am getting only one JSON object then i want to a div with class should be like(class="col-md-12").
if am getting two JSON object then i want to switch to a div with class="col-md-6".
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" class="col-md-12">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-6">
<div calss="thimbnail col-md-">
<div class="Option div 2">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-4">
<div calss="thimbnail col-md-">
<div class="Option div 3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use ng-class like below,
ng-class="{class}[condition]"
In your case ,
ng-class="{1:'col-md-12', 2:'col-sm-6'}[vm.students.length]"
For your reference, Detailed explanation
You have calss instead of class in the example code. I hope that is a typo.
To address to your problem you can make use of ng-class where you can assign classes based on conditions
More document on ng-class
Code Snippet:
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" ng-class="{col-md-12:vm.students.length === 1,col-md-6:vm.students.length === 2">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Consider this markup:
<div class="container">
<div class="row first">
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
</div>
<div class="row second">
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
<div class="col-lg-6 flush-col">
<div class="thumbnail-services">
<h3>Design</h3>
</div>
</div>
</div>
</div>
And here is a fiddle
What I want is to remove the right border on those two last columns (last one on the first row and last one on the second row)
I've tried using this:
.thumbnail-services:last-child {border-right:0px;} but is not working.
Any idea what should I do to make this work with the css pseudo element :last-child ?
thumbnail-services is not the last child of the row, but flush-col (or the columns in general) are. Select these instead.
.flush-col:last-child .thumbnail-services
http://jsfiddle.net/C8buA/1/
Based on cale_b comment.
.thumbnail-services{border-right:1px solid black; border-bottom:1px solid black}
.row .col-lg-6:last-child .thumbnail-services{border-right:none;}
http://jsfiddle.net/smurphy/9v7tt/
I am a newbie, I have following structure
<div class="row bottom">
<div class="col-md-4">
<div class="row">
<img src="images/logo-main-bottom.png" />
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
</div>
</div>
</div>
</div>
How can I add/apply a CSS on all 'row' divs that comes under 'row bottom'?
a css rule for that would look like
.row.bottom .row{
//style
}
Take any one class row or bottom
.row{
//add required css
}