I have a html code:
<div class="projLeader">
<div class="ui-widget-content">
<label>Captain:</label>
<ol>
<li class="placeholder" name="projLeader"><div class="adding">Drop Here</div></li>
<li class="dropClass" name="projLeader" <?php if (isset($projLeader)) echo 'value="'.$projLeader.'"' ?>><?php echo "<span class='closer'>x</span>".$projLeader.""?></li>
<input type="hidden" name="projLeader" class="hiddenListInput1" />
</ol>
</div>
</div>
I want to add css style:
.projLeader label
{
margin-left:25% !important;
}
But it does not work. if i put it inside label in html code it works:
<label style:'margin-left:25%;'>Captain:</label>
I have style for .projLeader:
.projLeader
{
float:left;
margin:3px;
width:30%;
}
And it works, so why it does not work with label?
As far as it looks this will probably work
.projLeader label
{
margin-left: 25% !important;
}
but consider this if .ui-widget-content has it's own selector for label in its CSS then your style will be denied. To give your style priority add the exact same selector .ui-widget-content Try to use inspect element to see what it used as a selector used and put your override CSS below that library.
.projLeader .ui-widget-content label
{
margin-left: 25% !important;
}
Hope that helps
Related
I have some nested elements that I need to apply styles in a project that uses Vue.js and Element-UI.
<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" #change="updateSite('other', data.other)" #blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>
In this instance I will be dynamically applying the class "disabledText" to the li element to color the text in the nested textarea, however I am unable to get the rule in the disabledText class to apply to the text area.
The CSS that I have tried:
.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{
Even applying a class name directly to the textarea element and referencing that in the CSS class does not have any effect.
The rendered HTML looks like:
HTML
Maybe something like that is gonna work:
.disabledText .el-textarea
or
.disabledText .el-textarea .el-textarea__inner
Although it's kinda hard to solve this problem without any reproduction. Could you provide an example in CodeSandbox?
Hi i want to select first label element within div with classname form_fields.
Below is the code,
<form>
<div className="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div></form>
What i have tried?
.fields label:first-child {
margin: 20px;
}
But this doesnt apply to the first label inside div of class form_fields. How can i do it? thanks.
Try with first-of-type pseudo-selector:
.form_fields label:first-of-type {
margin: 20px;
}
.form_fields label:nth-of-type(1) {
margin: 20px;
}
I can imagine you are looking to do more than just that but its a great start to ask around here. In HTML and CSS you will find there are several ways to achieve the same results and the path you choose will often be based on personal preferences. In this specific case you have just concept mistakes but you are definitively on the right track.
in your tag, you should change className o just "class".
in your style, change :first-child to :first-of-type
<form>
<div class="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div>
</form>
<style>
.form_fields label:first-of-type {
margin: 20px;
}
</style>
You can choose between 2 pseudo-class :
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. See doc
The :nth-of-type(1) CSS pseudo-class matches elements of a given type, based on their position among a group of siblings. See doc
Solution with :first-of-type :
.form_fields label:first-of-type {
background:red;
}
<form>
<div class="form_fields">
<span>first span</span>
<div>first div</div>
<label>
<span>Name</span>
</label>
<label>Description</label>
</div>
</form>
.form_fields label:nth-of-type(1) {
color: blue;
}
Hi I'm trying to figure out the way I can access elements in div using ones class.
<div class='hs_terms_conditions field hs-form-field>
<label class placeholder='Enter your name'>
</label>
<div class='input'>
<ul class='input-list'>
<li class='checkbox>
</li>
</ul>
</div>
</div>
My question is how can I access <div class='input'> from <div class='hs_terms_conditions field hs-form-field> and then change <ul> or <li>.
Was thinking of using classes and doing something like this:
.hs_terms_conditions.input.input-list.checkbox{
/*some style*/
}
I did try it but couldn't make it work.
I want to be able to change just that <li> or <ul> inside that div so it doesn't apply on all others.
Use ">":
.hs_terms_conditions > .input > .input-list > .checkbox {
/*some style*/
}
If you use .class1.class2.class3 it will match an element which belongs to all the classes. You could also use .hs_terms_conditions .input .input-list .checkbox.
You can access to .checkbox with parent access selector :
.hs_terms_conditions > .input > .input-list > .checkbox{
/*some style*/
}
I want to target a div when a checkbox is checked. Can anybody tell me how can I target an outer div when checkbox is checked?
if($('.checkboxClassName').checked) {
$(this).parent();
}
It will target the parent div that the checkbox is inside, you can use more .parent() if tour target is not inside the same parent.
example: if your code is like this:
<div class="container">
<div class="target"></div>
<div class="parent">
<div class="checkboxDiv">
<input type="checkbox">
</div>
</div>
</div>
and you want to target the div.target you'll need the code like this:
if($('.checkboxClassName').checked) {
$(this).parent().parent().parent().find(".target").css('background','magenta');
} else {
$(this).parent().parent().parent().find(".target").css('background','cyan');
}
those parents will work like this: $(this).parent() = targeting div.checkboxDiv
$(this).parent().parent() = targeting div.parent
...
Note how this jsFiddle highlights the usage in a very simple way:
A check box is focused upon (checked).
The CSS style :checked catches this occurrence and applies a CSS style to the div contents.
The div can be another element you want, just make sure you play around with the code and adapt it to your needs. Let us know if you need any more help!
Source: :checked
HTML
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
CSS
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
Edit: I thought you would like a reference to 'how' CSS works here:
Attribute Selector by value
Element plus Element
...and in general CSS selectors
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
The Name: and input box are on one line and the next line is just touching it.
how do i put them apart.
Add a line-height to the div like below:
div{
line-height: 30px;
}
Fiddle
Note: Here, I have applied the property for div tag in general as it is only an example. In actual case, you might want to add a class for the div tags within the fieldset and apply the line-height only for that class. Doing it that way will make sure other div tags in the page aren't affected.
without getting too complicated, something simple as the following will produce the desired results
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
this gives your input fields a small space above so that they are spread out.
Note: I have used specific selectors to apply these values to the fields in your example only.
add below css to your code
div{
margin-top:10px;
}
you can change margin as your requirement.
There are many ways to implement this.
The simplest way is simply to insert a < BR > between label and the input tag.
A second way is to use a table and place the input in the cell below.
An alternative way is to use for example divs and place the label in one div and the input in another and use css techniques like float etc. This has the advantage of controlling everything via css.