What do i have to write to my css code to select .formlabel class within formblock2, for example to change the color of Heading B to green instead of red?
.formlabel {color:red;}
<div class="form">
<div class="formblock1">
<div class="formlabel">Heading A
</div>
</div>
<div class="formblock2">
<div class="formlabel">Heading B
</div>
</div>
<div class="formblock3">
<div class="formlabel">Heading C
</div>
</div>
</div>
you can call the parent of it then call the div that you want like this.
.formlabel {color:red;}
.formblock2 > .formlabel {color: green;}
<div class="form">
<div class="formblock1">
<div class="formlabel">Heading A
</div>
</div>
<div class="formblock2">
<div class="formlabel">Heading B
</div>
</div>
<div class="formblock3">
<div class="formlabel">Heading C
</div>
</div>
</div>
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 have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
I have tried both first-child and first-of-type to hidden a first class "entry-list" but not working.
Here my code :
HTML
<div class="entry-content">
<div class="row">
<h2>Title</h2>
<div class="view-more"></div>
<div class="entry-list"></div>
<div class="entry-list"></div>
<div class="entry-list"></div>
</div>
</div>
CSS
.entry-content>.row>div.entry-list:first-of-type {
display: none;
}
Many thanks in advance
if you change your element in your .view-more class you can do it by using first-of-type
.row div:first-of-type {
display: none
}
<div class="entry-content">
<div class="row">
<h2>Title</h2>
<span class="view-more">VM</span>
<div class="entry-list">1</div>
<div class="entry-list">2</div>
<div class="entry-list">3</div>
</div>
</div>
You can easily get this done if you wrap your entry lists div with a another div.
You can read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
<div class="entry-content">
<div class="row">
<h2>Title</h2>
<div class="view-more"></div>
<div class="entry-lists">
<div class="entry-list">First</div>
<div class="entry-list">Second</div>
<div class="entry-list">Last</div>
</div>
</div>
</div>
Here is a working fiddle:
https://jsfiddle.net/h92dfz3o/
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.
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;}