I have a style rule I want to apply to a tag when it has two classes. Is there any way to perform this without JavaScript? In other words:
<li class="left ui-class-selector">
I want to apply my style rule only if the li has both .left and .ui-class-selector classes applied.
You mean two classes? "Chain" the selectors (no spaces between them):
.class1.class2 {
/* style here */
}
This selects all elements with class1 that also have class2.
In your case:
li.left.ui-class-selector {
}
Official documentation : CSS2 class selectors.
As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?
Chain selectors are not limited just to classes, you can do it for both classes and ids.
Classes
.classA.classB {
/*style here*/
}
Class & Id
.classA#idB {
/*style here*/
}
Id & Id
#idA#idB {
/*style here*/
}
All good current browsers support this except IE 6, it selects based on the last selector in the list. So ".classA.classB" will select based on just ".classB".
For your case
li.left.ui-class-selector {
/*style here*/
}
or
.left.ui-class-selector {
/*style here*/
}
You can use these solutions :
CSS rules applies to all tags that have following two classes :
.left.ui-class-selector {
/*style here*/
}
CSS rules applies to all tags that have <li> with following two classes :
li.left.ui-class-selector {
/*style here*/
}
jQuery solution :
$("li.left.ui-class-selector").css("color", "red");
Javascript solution :
document.querySelector("li.left.ui-class-selector").style.color = "red";
Related
How to apply same style with having two different parent classes that appears unique on each page body in magento2. Like i needed this in scss file which have deep nested structure but only its top parent alter for each page. for example i want this
class1 or class 2{
class3{
class5{
}
}
class4{
}
}
enter code here
I want to if its either class1 or class2 comes in html this styling should be apply. Thanks
define your root classes comma-separated
.class1, .class2 {
/* other selectors here */
}
so SASS will compile this code into
.class1 {
/* other selectors here */
}
.class2 {
/* other selectors here */
}
Anyway it's worth to remark that using multiple classes as ancestors of a scope will create redundant CSS code in output and it could be useful try to find a single selector (if possible, e.g. maybe magento allows to put a specific class only for both the pages?)
you can do something like this
.class1, .class2 {
.class3 {
/*your style */
.class5 {
/*your style */
}
}
class4 {
/*your style */
}
}
only thire parent class .class1 or .class2 only then style apply to class3, class5, and class4
Can I add a class selector after a pseudo class in my CSS rule, e.g:
a:hover.my-class {
background: red;
}
So if I hover over my anchor tag, <a class="my-class">link</a>, will the background be red in all browsers? is this valid CSS?
Why I need this
I have this problem because it is generated from a mixin in SASS:
#mixin focus($classA, $classB) {
&:focus {
&#{$classA} {
background: blue;
}
&#{$classB} {
background: yellow;
}
}
}
a {
#include focus('.class-a', '.class-b')
}
There is no such thing as a "pseudo-selector".
There are two features in selectors that start with "pseudo-": pseudo-class and pseudo-element. They are completely different features with different syntax rules.
You can place a class selector after a pseudo-class such as :hover, because they are both simple selectors and order of simple selectors in a compound selector does not matter (type and universal selectors are the only exceptions to this rule — they always have to come first, such as the a in your example).
You cannot place a class selector after a pseudo-element such as ::before, because a pseudo-element is not a simple selector. Your question may not be about pseudo-elements, but this distinction has to be made because of the common use of the term "pseudo-selector", which incorrectly groups both features into a single umbrella term (and frankly makes the question more complicated than it really needs to be).
Yep, you can add a class to a pseudo class.
This css is valid and it works:
a:hover.hoverme {
background:blue;
color:white;
}
This works too:
a.hoverme:hover {
background:blue;
color:white;
}
Or you can add a pseudo class after a class.
.hoverme:hover {
background:blue;
color:white;
}
Hover me!
You can check if your CSS is valid at W3C's CSS Validator page.
I want to apply one CSS rule for multiple selectors. like this:
.btn-group.pull-right.with_space .btn + .btn, .btn-group.pull-right.with_space i + i{
margin-left: 10px;
}
Now my question is, if there's a shorter way to do it. (since the parent elements are the same for both selectors, and the different is only in the last child).
To expand on my comment, if you choose to use a CSS pre-processor such as SASS or LESS, you can do nested selectors, like so:
/* SASS example */
.btn-group.pull-right.with_space {
i + i, .btn + .btn {
/* ... */
}
}
After compiling, the resulting CSS will be similar to what you had already written.
Sometimes, it might be better to add a common class to the elements that are sharing styles. So, in your .btn + .btn and i + i elements, add a class, such as btn_and_i, so you can target them with a single selector:
/* CSS example */
.btn_and_i {
/* ... */
}
If you're hell-bent on making this the "shortest" selector possible, then add a single-character class to the targeted elements, such as "a".
.a {
/* ... */
}
I've been reading about CSS and I am really confused about how the inheritance works (I think thats the right term for the following). In CSS I can declare a class:
#mytext {
}
then I see some people do:
p.mytext {
}
But why do that? Why can't they just do:
<p class="mytext">
Without declaring p.mytext? Does it make sense what I am asking?
and sometimes i see:
p#mytext ... Why is it different? I'll keep searching tutorials but thanks for any advise.
The pound sign (#) refers to an ID which needs to be unique for the page. The period (.) refers to a class which can be used many times. People would use p#mytext if they wanted a unique styling for one (just one) paragraph tag.
You can read up about it here.
Wanted to add that some web developers seem to gravitate towards declaring everything as classes. If you use a layout generator of any kind more often than not every element will be a class.
#mytext references <p id="mytext"/> (doesn't need to be a p element, #mytext just refers to that ID)
Whereas .mytext references <p class="mytext"/> (doesn't need to be p element, .mytext just refers to anything with that classname)
By adding other things such as p.mytext you create a stronger bind to your rule, for instance:
p.mytext { color:white; } .mytext { color:black; }
may at first seem like the color would be black, however as you have created a stronger bind (by being more specific earlier) the actual color will be white.
First check this question here.
In short # represents an ID in css, and . represents a class. if you say p#myText in your css it means you have a <p id="myText"></p> in your html, and p.myText is for <p class="myText"></p>.
Furthermore you declare an ID if you have an unique item in your html, and if you have multiple elements with same styles you declare a class for them.
CSS 101 - the basics
CSS - all elements
* { ... }
HTML - basic element
<p></p>
CSS
p { ... }
HTML - element with id
<p id="someid"></p>
CSS - element with id
p#someid { ... }
CSS - all id's
#someid { ... }
HTML - element with class
<p class="someclass"></p>
CSS - element with class
p.someclass { ... }
CSS - all elements with class
.someclass { ... }
CSS - is equal to
*.someclass { ... }
HTML - element with both id and class
<p id="someid" class="someclass"></p>
CSS
p#someid.someclass { ... }
HTML - nested element
<p><span></span></p>
CSS
p span { ... }
HTML - nested element with id
<p><span id="someid"></span></p>
CSS
p span#someid { ... }
HTML - nested element with class
<p><span class="someclass"></span></p>
CSS
p span.someclass { ... }
HTML - nested element with id in element with class
<p class="someclass"><span id="someid"></span></p>
CSS
p.someclass span#someid { ... }
now you can mix and match all those things up to make really complicated selectors
if you want multiple selectors with the same properties you can seperate them with a comma
p.someclass, span#someid { ... }
A hash (#) is a unique ID definition.
#foo { color: blue; }
<div id="foo">
A dot (.) is a class definition.
.bar { color: red; }
<div class="bar">
But you can also refer to tags with certain classes and ID's:
div.baz { color: green; }
span#qux { color: yellow; }
<div class="baz">
<span id="qux">
+1 for the interesting question.
First, you have it backwards, . (period) is class and # is ID. You probably already know this, but an element can only have one ID and you should only have that ID defined once on your page.
As for the second part of your question, some people like to append the element name to their classes and IDs. It's just more specific that not having it defined.
img.large { width 200px /* Only applies to img with large class */ }
textarea.large { width: 300px /* Only applies to textareas with large class */ }
p#large { font-size: 1.5em; /* Only applies to p with ID of large */ }
.large { font-size: 2em; /* Applies to any element with class of large */ }
Personally, I like to append the element name in my styles so that I don't forget which elements it is affecting.
lets say you have the following HTML:
<div id="main">
<p class="para">content</p>
<p class="para">content</p>
</div>
then:
div#main { }
references divs with the id of "main"
#main { }
references all elements that have the id of "main"
p.para { }
references all p elements with the class of "para"
.para { }
references ALL elements with the class "para"
NB. An ID must be unique on the page whereas a class can be used multiple times
I'm not sure this is possible, but is there a syntax to be used in CSS when you want to style an element based on the combination of classes applied to it?
I understand that I can check an element with jQuery or something and change it's style based on the classes it has, but is there a pure CSS way to do this?
For example, if I have a class for bold and green:
.bold_green { color:green; font-weight:bold; }
And a class for bold and blue:
.bold_blue { color:blue; font-weight:bold. }
Now, say I am using jQuery to add and remove classes dynamically and want any element that has both classes to turn italic pink.
Something like:
.bold_green AND .bold_blue { color:pink; font-style:italic; }
Or, if I want to style an element that has aclass, and is a descendant of another element that has another class?
Something like:
.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }
Thanks!
Edit
Thanks for all the answers. These are pretty much what I thought (just treating the classes as regular selectors), but they don't seem to be working for me. I will have to check my code and make sure they aren't being overridden somehow...
$('.bold_green.bold_blue').addClass('something-else');
Or in CSS:
.bold_green.bold_blue { color: pink; }
Notice there's no space between the selectors.
You don't need anything special, just
.bold_green.bold_blue { color:pink; font-style:italic; }
Paul and Voyager are correct for the multiple classes case.
For the "HAS CHILD" case you would use:
.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */
Which will style any bold_blue elements inside a bold_green element.
Or if you wanted a DIRECT child:
.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */
Which will style only bold_blue elements which have an immediate parent bold_green.
In visual studio 2013 the CSS setting is applied to multiple classes by a "Comma" as follows:
.bold_green, .bold_blue { color:pink; font-style:italic; }