I have this composition :
<div class="theclass1">
<input type="checkbox" id ="1">
<div>
<div>
<div>
<label for="1">bla bla</label>
</div>
</div>
<input type="checkbox" id ="yy">
<label for ="yy">other</label>
</div>
<div class="theclass2">
<input type="checkbox" id ="2">
<div>
<div>
<div>
<label for="2">bla bla</label>
</div>
</div>
<input type="checkbox" id ="xx">
<label for ="xx">other</label>
</div>
</div>
</div>
I want (and I am super cofussed) to apply css styles to the label but only the first of 'theclass1'
I'm playing with first-of-type, first child, +div >div>div ,etc... without success.
Maybe somebody can explain me how to made this and if possible using some examples. I have a lot of troubles to understand the meaning of space, + and > selectors. Also... I think it can have more than one solution ?
I'd need code to style only the first label of theclass1, or the first inside >div>div>div but only this one. And something similar for theclass2.
Now I have a polluted css and undesirable results.
(The div 'theclass2' is inside div theclass1.)
Thanks in advance.
problem is not the CSS only, There are serious semantics errors in your HTML
id attribute name must not start with numbers
taken from HTML4 document of w3c
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
so much nesting , why these extra parent div div and div?
now first you fix the HTML nodes then apply below css
iff you want only first label of first div class
.theclass1:first-child > label:first-of-type
working DEMO
.theclass1 > div:first-of-type > div > div > label {
color: red;
}
http://jsfiddle.net/807t5L6z/
.theclass1 label:first-child {
color:red;
}
You could use this probably similiar code for label in .theclass2
General answer is that "global first label in HTML" couln't be done, see here: CSS global :nth-of-type selector (:nth-of-class)
And it's better to introduce class or id for this label.
However, if you want to target it without modifying HTML, you can use this selector:
label[for='1'] {
background:red
}
.theclass1 > div > div > div label {color:red;}
Related
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
I need to set a honeypot section of a side form to display:none but for some reason my CSS adjustments would not work. The elements involved are these (as shown when inspected via Firebug):
<li id="field_9_9" class="gfield gform_validation_container field_sublabel_below field_description_below">
<label class="gfield_label" for="input_9_9">Phone</label>
<div class="ginput_container">
<input id="input_9_9" type="text" value="" name="input_9">
</div>
<div class="gfield_description">This field is for validation purposes and should be left unchanged.</div>
</li>
On the stylesheet, I inserted:
.gfield gform_validation_container field_sublabel_below field_description_below #field_9_9 {
display:none;
}
I have a feeling I'm targeting the wrong element. Which one should it be?
You need to do this:
#field_9_9.gfield.gform_validation_container.field_sublabel_below.field_description_below {
display:none;
}
You forgot to add the "." before each class name and since all the classes (and ID) are on the same element, you need to join all the classes and ID together.
But a more elegant solution would be to simply target the ID:
#field_9_9 {
display:none;
}
I'm trying (and also did search here) to select a specific element without any success:
<form id="filterForm">
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="optioncontent">
<div>
The element I'd like so select via CSS is the ver last div with the class filterOption filterSection. I tried:
.filterSection:last-of-type
.filterSection:last-child
.filterSection:last-of-type
.filterSection:last-child
Any idea on how this could be achieved? Help would be great!
Actually i don't know what you want, it's that using your half code to select specific one or select the last one? If that would be the following:
.filterOption.filterSection:nth-child(1){
background-color:yellow;
}
.filterOption.filterSection:nth-child(2){
background-color:red;
}
.filterOption.filterSection:nth-last-child(2){
background-color:grey;
}
<form id="filterForm">
<div class="filterOption filterSection">1</div>
<div class="filterOption filterSection">2</div>
<div class="filterOption filterSection">3</div>
<div class="optioncontent">
<div>
Here's http://jsfiddle.net/ianwong/p3s62rrm/
If you want to select from the strict closed code, you can click http://jsfiddle.net/ianwong/p3s62rrm/1/
Thank you all for your respond with help.
As Paulie_D mentioned it wont be flexible, but my code is dynamic (div class="filterOption filterSection") . And as Hashem Qolami wrote it's not possible.
I also tried :nth-last-child(1) as wong ian and ghorg12110 mentioned but it wont work as I have more child div's in div class="filterOption filterSection" and need to select the last parent div class="filterOption filterSection".
So I ended up adding an empty div in my php-code right at the end with the css-style I needed.
Not nice, but works for now.
You can try with the css3 property :
.filterOption.filterSection:nth-last-child(1);
You can use the :last-of-type selector as you can see in this Fiddle
So that you can select
<form id="filterForm">
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">ME!</p>
<div class="blablabla"></div>
</form>
with this css
.filterOption:last-of-type { color:red }
According to the W3C there's also a :last-child selector as you can check HERE but it didn't work in JSFiddle.
While trying to understand bootstrap I came across this :
.control-group.error input, [...] {
[...]
}
It looks like a descendant selector but .control-group.error is a class.
I looked through this and I couldn't find anything : http://css.maxdesign.com.au/selectutorial/
Can anyone give me some pointers ?
Assuming I've understood your question correctly, .control-group.error will match any elements that have both control-group and error class names.
As you said, the input will match any input element that is a descendant of any element with the class names control-group and error.
For example, it would match:
<form class="control-group error">
<input> <!-- It matches this (both class names on form) -->
</form>
And it would not match:
<form class="control-group">
<input> <!-- It won't match this (only one of the class names on form) -->
</form>
I would like to replace next element of a given element and add css class to the next element.
I tried like this but it didn't work.
$(".validate_txt_sContactFirstName")
.next()
.replaceWith('<div>2</div>')
.addClass("atleastTwoChars");
<div class="xqh_Field">
<nobr>
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactFirstName$txt"
type="text" size="25"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactFirstName_txt"
class="xqh_TextBox_Edit validate_txt_sContactFirstName error"
style="width:150px;margin-right:1px;">
<div class="atleastTwoChars"></div>
</nobr>
</div>
$(".validate_txt_sContactFirstName")
.next()
.text(2);
This is what you could use here. That way only the content of the <div> is edited. If you need HTML replace text(2) with html('<strong>2</strong>')
if i am getting you correctly you can do it in a very simple way, because when you already have the class atleastTwoChars in the div what is meaning of replacing it adding text in it and then add same class. you can just replace inner value of div.
$('.atleastTwoChars').html(2);
fiddle : http://jsfiddle.net/qXydv/