I have this HTML:
<h2 class="first second">Red</h2>
<h2 class="second">Blue</h2>
<h2 class="first">Green</h2>
How can I select h2 with first and second class?
thanks about answers
Update:
If I have another h2 tag like this:
<h2 class="first second third">Default</h2>
it will be red with h2.first.second selector. Is there any way to select only element with first and second classes, not more.
Simply:
h2.first.second {
color: red;
}
This selects the h2 element with both classes "first" and "second". Refer to the CSS Selectors Level 3 W3 recommendation for more info.
JSFiddle demo.
If you are trying to select h2 with first and second class simutaneously
h2.first.second
I have created a working CodePen example of the solution.
h2.first.second {
/* styles go here*/
}
To select elements that have multiple classes simple use this:
h2.first.second
Note that there is no space between the classes, as apposed to the following which would select elements with the class of second which are inside a h2 element with the class of first
h2.first .second
You can select
.first.second {}
if you want only the first h2 to be selected. Make sure there is no space!
The following rule matches any h2 element whose class attribute has been assigned a list of whitespace-separated values that includes both "first" and "second":
h2.first.second { color: red }
Reference
But, to select an element whose class attribute exactly equal "first" and "second" I used this rule:
h2[class="first second"], h2[class="second first"] { color: red }
JsFiddle demo.
Related
I have a Wordpress-Website and want to edit the css of a specific site (generated from a plugin).
The problem is, I want to remove (display: none) a header (h2). But the h2 doesn't have a class (and because it isn't the only h2, I cannot display: none all the h2), so I cant select it with CSS. Is there a way to select something without a class?
There is indeed! find an element above it in the DOM which you CAN select, like a container with a classname, and use a selector. For example, if you have:
<div className="section12">
<h2>Stuff</h2>
</div>
Then use something like:
.section12 h2 { display: block; }
However, if you are using something like Elementor on your site, then you can just remove the H2 in some other way, or even add a class name to it.
Yes, you can do this with selectors like nth-child() ...
For example, suppose you want to make the second h2 tag red. This solution will be useful when there is no class name.
h2:nth-child(2) {
color: red;
}
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
<h2>hello</h2>
Can anyone explain me what does the below css do?
.validate-error .validate-error {
color: #cc2424;
display: inline-block;
margin-top: 5px;
}
.make-switch + .validate-error {
margin-left: 10px;
}
In the first css i see the same class name used twice?. Is this css valid?. I came across this thread
What is the difference between the selectors ".class.class" and ".class .class"?
but unsure whether its applicable if we use the same class name twice?.
The first one styles child elements/descendant with the same class name:
<div class="validate-error">
This color may be different from #cc2424
<div class="validate-error">Has color #cc2424</div>
</div>
This means: The styles are applied/overwritten for child elements with the same class name.
The second one styles siblings:
<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>
That means: Only if .make-switch is followed by .validate-error the styles are applied to .validate-error.
Demo
Try before buy
.validate-error .validate-error {
...
}
This css targets a class .validate-error that is a descendant of .validate-error.
For example
<div class="validate-error">
<div class="validate-error">
</div>
</div>
Next css targets the class .validate-error when it is right next to .make-switch
.make-switch + .validate-error {
...
}
when selector parts are stuck together without whitespace it means it should all match the same element.
example: (should only match an element having both validate-error and other-class as classes)
.validate-error.other-class
when there is whitespace between them you are selecting an element that has other-class as a class and has a parent element with the validate-error class
the + in your second selector actually means you don't want a child of make-switch but you want the sibling element, but only if it has class validate-error
Yes it is valid. There are no rules in CSS preventing a class name appearing multiple times in a complex selector. There are no rules in HTML preventing two elements, one of which is a descendant of the other, from sharing membership of a class.
Id only should be unique, but classname we can use multiple times.
Is there a way to style only the first element with a specific class? The :first-child psuedo selector seems to only work on tags.
EDIT: Not all classes have the same parent element so :first-child isn't an option.
You may try like this:
<div>
<p class="blue">1st</p>
<div class="blue">2nd</div>
</div>
<div>
<div class="blue">3rd</p>
<div class="blue">4th</div>
</div>
So this will make only the first element as blue
Also check :first-child pseudo-class
The :first-child pseudo-class matches an element that is the first
child element of some other element.
.class-name:nth-of-type(1)
This should style what you want
JsFiddle example
This should work .classNamep:first-of-type
You need to double check your class name. A typo could happen.
See this fiddle. It shows you that :first-child works even with class selectors. :)
Code:
<span class="spana">first</span>
<span class="spana">second</span>
.spana:first-child {
background-color: #ddd;
}
Using the nth-child() pseudo class selector is a good approach, this is supported in all major browsers, including IE9+.
Here is the example HTML:
<div class="blue">Will be blue</div>
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>
And the CSS:
.blue:nth-child(1) {
color: blue;
}
This will select the first div of class name blue. Bare in mind that the first iteration is selected by passing 1 into the pseudo class, not 0 like arrays for example.
There are also other key features of the nth-child() pseudo class; as well as passing in numbers like I have shown previously, the pseudo class also supports key words such as even or odd like so.
//Applies styling to every even instance of the class .blue
.blue:nth-child(even) {
color: blue;
}
//Applies styling to every odd instance of the class .blue
.blue:nth-child(odd) {
color: blue;
}
This can also be taken further; a formula can be expressed as to exactly which elements the styling is to be applied to.
The formula is expressed an+b, where a is the frequency of the elements to select, and b is the offset. So the formula 3n+4 will apply styling to the fourth element, and every third element beyond that. (4, 7, 10, 13, 16, etc...). Below is an example of how this can be applied.
//Style every 6th instance of the class .blue, starting with the second element. (2, 8, 14, 20, 26).
.blue:nth-child(6n+2) {
color: blue;
}
If no offset is required then simply pass in the same formula as before, dropping the offset at the end; passing in 4n is an example of this.
I hope this helps, I feel that this pseudo class is very powerful, and equally under rated by a lot of people.
There is no first-of-class selector.
See BoltClock's answer (CSS3 selector :first-of-type with class name?)
There is a work around but it didn't work for me
I'm trying to style some Drupal output. In particular, I'm trying to reference a class with a super long name (that includes spaces). I'm unclear the syntax for this. Forgive me, I'm a CSS newbie. See:
<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document">
<header>
<h2 property="dc:title" datatype="">National Nutrition Month: March 2012: “Get Your Plate in Shape”</h2>
I ultimately want to reference the H2 property. I was thinking it would be something like:
.node SOMETHING-HERE .header h2 { declaration; }
I cannot just reference the node, since it is used elsewhere for other purposes. I want to be specific and select only this class:
class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"
Using dots (.) you can combine multiple class as a group
.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
...
}
Maybe I'm not giving you the answer you need, but class names cannot contain spaces.
An element can have multiple classes, which allows you the combine multiple styling rules for different classes to apply to a single element.
If you have spaces in a class attribute, it creates an element with multiple classes, delimited by spaces.
For example, if you have an element like this
<div class="big red outlined"></div>
and you had CSS like this
.big {
width: 1000px;
height: 1000px;
}
.red {
color: red;
}
.outlined {
border: 1px solid black;
}
All three styles would be applied to the single div to make it big, red, and outlined.
In your case, it looks like you are trying to access a specific element, which is what the purpose of the id attribute is. Notice that the node has a unique id:
<article id="node-38">
You can access an element with a specific id in CSS by using the # selector, like this
#node-38 {
//style goes here
}
In your case, you probably want to do something like this:
#node-38 .header h2 {
//style goes here
}
Those spaces are effectively multiple classes on the one element, so your <article> tag has the "node" class, and the "node-article" class, and so on and so on.
So if you had:
.node { background-color: black; }
.node-article { color: white; }
Then the article would have a black background, and white text. Both would be applied.
Also remember you can reference tags, and ids, so to get to your H2 you could do:
article header h2 { .... }
or
#node-38 header h2 { .... }
And you don't necessarily need the "header" in there either, depending on what you want to achieve.
If you want to select all <h2>s that are descendants of <article> tags with the "node-article" class, then you can do this:
article.node-article h2
class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"
Above line contains total 9 classes because of spaces between them. so, node is a single class, node-article is another class and so on. If you want to reference a class then you should write it like
.node{background-color:red;}
If you want to reference multiple classes at once and want to apply same styles then you can write like
.node, node-article, node-teaser{background-color:red;}
In that case three individual classes node node-article node-teaser will have the same style with background color red. Now if you have multiple elements with same class i.e. article then all article with same class will have same style. To apply a style to a unique element you can id instead of class like id="node-38" and you can apply style with CSS to this element like
article#node-38{background-color:red;}
to select/reference the h2 inside header with parent element article that has id="node-38" you can write
article#node-38 header h2{background-color:red;}
When you define an element with a class, including spaces actually denotes multiple classes.
That article actually has the following classes applied to it : node, node-article, node-teaser, contextual-links-region, node-even, published, with-comments, node-teaser, and clearfix.
You could use any of those classes when targeting the element. If I were referencing the H2 tag I would do something like
article#node-38 header h2{
This is a much more specific way to target than using all of those classes. it's shorter syntax, and more specific to the element you want to style.
The HTML:
<span class="foo">Hello</span>
I want the CSS class "foo" to be defined as follows: the first letter of the enclosed content is red, and the rest of the characters are green. Is this possible?
EDIT:
What if I want something like the opposite? I want the first letter to be EXCLUDED from any styling (except any parent styling), and all the rest of the letters to be green.
Use the first-letter pseudo selector:
.foo { color: green; display: inline-block; }
.foo:first-letter { color: red; }
Here's the fiddle: http://jsfiddle.net/ZLapy/
Note: the :first-letter selector will not work on an inline element.
You have to use either block, inline-block or table.
Yes, :first-letter pseudo selector.
span.foo:first-letter
{
font-size:200%;
color:#8A2BE2;
}
Yes, you can use the first-letter pseudo element to do this.
Example:
.foo{ color: red; }
and
.foo:first-letter{ color:green; }
The first-letter pseudo element (hence the name) will change the property of the first letter in the span.
You can read more on how to do this # http://www.w3schools.com/cssref/sel_firstletter.asp
EDIT:
If you want to do the opposite, and have the first letter be excluded from the style, the easiest way would be to exclude the first letter from the span entirely. You could also change the color of the first letter to the color of the rest of the text on the page (default color) .