This question already has an answer here:
Why is my jQuery :not() selector not working in CSS?
(1 answer)
Closed 9 years ago.
I have a default class for my form which is defining some styles rules (scss format) like this:
form.simple_form {
$indent: 200px;
$length: 350px;
....
}
In some cases, I need other set of style rules to be applied to my forms, but I am not able to remove the simple_form default class from them (each form in my application is created with simple_form class).
Fortunately, I am able to set additional class of each form and using not css selector I am able not to apply the default form class for each form like this:
form.simple_form:not(.signup, .login) {
$indent: 200px;
$length: 350px;
....
}
That is working perfectly, but for some reason, the simple_form class is not applied for all forms no matter that they have not got the signup or login classes.
So, why the css selector is not able to get a form with simple_form class? Something more, If I paste in the console the following code:
$('form.simple_form:not(.signup, .login)')
It successfully returns the form.
Please note, that I am using ruby on rails and simple_form gem.
EDIT:
This is the HTML of the form that I want to select:
<form accept-charset="UTF-8" action="/webinars" class="simple_form new_webinar" data-remote="true" data-type="js" data-validate="true" enctype="multipart/form-data" id="new_webinar" method="post" novalidate="novalidate">
....
</form>
This is the HTML that I do not want to select:
<form accept-charset="UTF-8" action="/sessions" class="simple_form login" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="kmDnV10Pv3eQz09U9QKTjfLQ7zweu6teALh4DDjYmfk="></div>
...
</form>
The problem you're having seems to be the use of a comma-separated list of selectors within the :not() selector, each element to be removed must be selected ('unselected'?) one at a time (certainly in Chromium 25, Ubuntu 12.10).
Given the following HTML:
<p>No classes</p>
<p class="test">With class 'test'</p>
<p class="test1">With class 'test1'</p>
The following works:
p {
color: #f00;
}
p:not(.test):not(.test1) {
color: #000;
}
JS Fiddle demo.
Whereas the following (similar approach to yours) does not:
p {
color: #f00;
}
p:not(.test, .test1) {
color: #000;
}
JS Fiddle demo.
Related
I am using a styling for all the input fields but there is one field for which i do not want that style. Is there any way i can disable the css for that particular field and let it be for others.
You can add a css class to that element and use :not pseudo-class selector:
input:not(.notred) {
background: red;
}
<input name="text1">
<input name="text2">
<input name="text3">
<input class="notred" name="text4">
<input name="text5">
<input name="text6">
In CSS3, you can use ‘:not()’ to exclude an element using id or class.
add a class to that input which you want to disable, then in css
input:not(.that_class)
Let me know if you have any issue.
I need is an asterisk in the required fields
I have this code
.required label::after {
content: '*';
color: red;
}
in my html
<div class="required" >
<label for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
This works well.
but I want to put it in a directive.
this is my directive
#Directive({
selector: '[lambRequired]',
host: {
'[style.after.content]': '"*"',
'[style.after.color]': '"red"',
},
})
export class RequiredDirective {
constructor() {
}
}
and in my html
<div >
<label lambRequired for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
but this does not work anymore
help me I will be grateful.
Thank you
You cannot do this by using this approach since pseudo elements are not actually part of the DOM tree. As a consequence of that they are not exposed in any manner on the DOM API.
For you to be able to work with pseudo elements you would need to use a class / css like you were doing before.
But unless you were planning to have more functionality on the directive don’t see what kind of gain you would have to create a directive that would just change the color of the text and append an asterisk without any actual logic or event monitoring. A css class would be way more efficient for such a simple goal.
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 would like to change style of #postBtn, if #textfield is empty, something like
#postBtn:[#textfield.value.length==0]{
border-color:gray;
background-color:gray;
}
In html:
<input id='textfield'>
<input type="button" Value="Post" onClick="post()" id="postBtn">
How do I achieve this without javascript?
Thanks!
Ok, you can add required to your input field like so:
<input id='textfield' required>
<input type="button" Value="Post" onClick="post()" id="postBtn">
And then, using :invalid and the adjacent sibling selector (+), you can style the button if the field is empty like so:
#textfield:invalid + #postBtn {
background-color: red;
}
Here is a fiddle of it in action: http://jsfiddle.net/w7377/
Note: If the text input field is not actually a required field, then this solution is not the way to go. You may have to use a Javascript solution if that's the case.
Heads up: I am new to this forum and English is not my main language so sorry if its not completely understandable.
I am making a mobile website for school and it is going pretty far so well...
One problem: i have a thingy(sorry, dont know the name for it) in my css file(#styled_button) and works fine. There is one button i wanted to be positioned differently so i copied the code from '#styled_button' and created a new thingy and added postion:relative; and float:right; but for some reason my button doesnt get styled at all now. (i did change the id on my button).
EDIT: If i change my button id back to button_styled it is styled.
Even without changing the code, so #logout_button is the same as #button_styled, nothing happens.
My button:
<form action='m.member.php' method='POST'>
<input type='submit' name='logout_button' value='Logout' id="button_styled">
</form>
CSS:
#button_styled {
color:white;
background:#666;
font: bold 45px Harabara;
padding: 20px;
text-decoration: none;
vertical-align: middle;
}
EDIT: Typo removed(wasnt copy pasted from my original code), but the problem is not with the form since it works...
As by request of 'brbcode' here is the code of one of the other buttons im using:
<form action='m.loginscreen.php' method='POST'>
<p>Username:</p>
<input type='text' name='username' id="styled">
<p>Password:</p>
<input type='password' name='password' id="styled"><br>
<ul>
<li><input type='submit' name="loginbutton" value='Log In' class="button_styled"></li>
<li><input type='submit' name="registerbutton" value='Register' class="button_styled"></li>
</ul>
</form>
PS: Sorry again for my fluency in english, but for those that didnt fully understand my button works its just the styling...
It sounds like you might be using an ID on several elements in your html(?). ID's should only be used once per page - typically if you have one element that's different than all others. If you're using the button_styled type in several places, you should change it to a class. In your html:
<input class="button_styled" ... >
And in your CSS:
.button_styled {
/* your styling */
}