In mootools how can we select a UL with spaces in its classname.
Im using mootools 1.3.2.
Need to change the style of this UL to "block".
Class names cannot have spaces. Spaces separate multiple class names.
So for an element like this:
<ul class="class1 class2">
You might use this:
$(document.body).getElements(".class1.class2")
The important thing is to have the two class selectors with no spaces between them.
Related
What is div class="navigation" and why is it used?
Classes are used to define the behaviour of collection of HTML elements, similarly, ID's are used to define the behaviour of a single HTML element.
The class navigation has no special significance, and would initially be the same as a class called 'user' or 'glass' or 'cup'. Classes only become different to eachother once some styling or interactivity has been added to them using CSS or Javascript.
So in conclusion, the class 'navigation' doesn't mean anything apart from semantic meaning. For example, you might give a nav tag a class of 'navigation' for better understanding, but it wouldn't make a difference if that class was 'tree'.
classes are used to make the html element Identifiable and make Styling using styling.css
hence ur not using any framework like bootstrap there is no significance for YOUR class name "navigation" "navigation" is just a class name
The class attribute specifies one or more classnames for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class
The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
so you can name the class according to your understanding .hope it would help you
for more information you can check it out this link
https://www.w3schools.com/tags/att_class.asp
I have this css-selector
.buttons:last-child::not(a.hide)
<div class="buttons">
1
3
3
</div>
I want to select the last child which has not a class of ".hide".
But it does not work. What is wrong?
Lots is wrong:
not only accepts simple selectors, so either an element or a class. For your example, not(.hide) should do the job.
not(.hide) is not a pseudo-element, it is a pseudo-class. As such it should be preceded by a single colon, not a double one
.button:last-child does not select the last child of .buttons, it selects any element of class .buttons that is the last child of its parent. To select the last a in buttons use .buttons>a:last-child
Combining pseudo-selectors requires candidates to match them all. So :last-child:not(.hide) will select elements that are both a last child and not of class hide. Of which you have none. Change the class name in the css or the html and you will match the final element.
In fact I'm not sure you can achieve what you want with pure css.
So, I thought I knew my basic CSS, but my brain is twisting right now. I want to implement the 960 grid system to my website, but before I do, I want to fully understand the principle of the code.
I've got two questions. Firstly, the css regulating the width of the columns. We have the parent class ".container" to the left, and two classes to the right, where the "column" class is a descendant selector of the "one" respectively "two" classes. Is this saying that the class "column" is 40px wide if it is contained within "one" AND "container"? Simply put: I don't really understand the relationship between these three elements.
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
Second question: When calling the classes in the HTML code, it seems that is done with the code
<div class=one column>Content</div>
right? But there is no class labeled "one column", only the descendant selector "column" to "one". What I am not getting here? Thanks a lot in advance.
In HTML, you can apply multiple classes to a single element. However the above syntax is incorrect; the value has to be encased in quotes:
<div class="one column">Content</div>
Without the quotes you end up with two attributes: class=one and column, which is different (and invalid HTML).
HTML doesn't have a notion of selectors, so the space between them is not a descendant selector, nor is the attribute value itself a selector. Instead, the space is merely a separator used to distinguish them as two separate classes.
Consequently, to answer both questions, the selector .one.column applies to an element that has both of these classes.
class attributes don't have any sort of CSS processing, like descendant selectors. The value of a class attribute is a space-delimited list of classes to apply to the element. So this div:
<div class="one column"></div>
has both the classes one and column.
Then, the CSS selector .one.column applies to elements who have both the classes one and column.
How do I select a class like class="boolean optional" ?
I have tried this:
.boolean optional {CSS}
.boolean_optional {CSS}
As Zepplock says, that's actually two classes in a single attribute: boolean and optional. The space is not part of a class name; it acts as the separator.
These three selectors will all match it:
.boolean
.optional
.boolean.optional
The last selector only picks up this element as it has both classes.
You never include a space when chaining class selectors, not even like this:
.boolean .optional
As that selects .optional elements that are contained within separate .boolean elements.
Those are not classes with spaces :) They are called multiple class selectors.
You basically just need to make sure all the class names are connected (no spaces between them) and separated with a dot.
.boolean.optional {
}
Spaces are not valid in class name. class="boolean optional" means the element has the classes boolean and optional, so you can match it with either .boolean, .optional, or if you want to match only objects that are both optional and boolean, with .boolean.optional.
Classes will never actually have spaces in their name. In your example, that is actually two classes; boolean and optional.
to apply style to an element that has both of those classes, the construct is
.boolean.optional {
/* CSS */
}
However, IE6 is known to have some issues with this. See this link for more details on known quirks.
I appreciate this was a while ago, but in case anyone's interested, something I've found handy also is, how to target/select an element within an element which has both classes...
EXAMPLE
.boolean.optional > p {
color: red;
}
Perhaps requires no explanation, but: turns 'paragraph text red' ONLY for paragraph's inside of elements where both classes exist i.e.both .boolean AND .optional
I have a div with class "class1" . And a class: .class1 input {etc} so that all the inputs in the div get styled.
Is there away to make sure one specific input in the div does not get styled, but instead keeps the default input styling/button?
Since there is no :not selector in CSS 2.1, your best bet would be to assign classes to all of the inputs that you want to have a certain style. Then, target them like this:
.class1 .inputclass1
and then your other input (the one that needs default styling) won't be affected.
If you want to use CSS 3, then you can use :not like so:
.class1:not(.defaultclass1)
and give defaultclass1 to the element you want to have default styling.
You can either:
(1) Amend .class1 input {etc} to .class1 input.a {etc} and apply the style a to all your inputs bar the special one.
or
(2) apply an inline style to the special input in question resetting its format.
in a situation like that you have two kinds of inputs in this div. one that should be styled and one that shouldn't. You basically have two classes of inputs, but you haven't givven them class names. I would suggest giving them class names (e.g. styled and nonstyled or what not) and basing your css off of that. Otherwise you could use a pseudoclass, but that I'm not too sure on.
You can take a look at the :not() selector. However, this is not supported by IE. Probably easiest to provide a CSS over-ride for the specific input that you would like to be "default" styled.
in case you are planning to support all browser which do not support CSS3. You can over-ride the rule by making another class. like
.class input {etc}
and then over-ride etc rule by giving some other class to that input e.g. .notClass
input.notClass {over-ride etc }
You can use .class imput[type]{} if this is another type of input
Best way is use a class for that all input like .class1 input.all{} and leave the non style one without any class