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.
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>
This question already has answers here:
Does the order of classes listed on an item affect the CSS?
(5 answers)
Closed 1 year ago.
If We do something like this in our css
.class01.class02.class03{ background-color: lavenderblush; }
.class03.class01.class02{ background-color: brown; }
and this in our html
<article class="class01 class02 class03"></article>
<article class="class03 class01 class02"></article>
the 2nd rule will be applied to both elements. Is there a way to make these rules apply according to the order?
It won't work because: Order of CSS classes in HTML doesn't matter but there is a way using attribute selector
article[class="class01 class02 class03"]{ background-color: lavenderblush; }
article[class="class03 class01 class02"]{ background-color: brown; }
<article class="class01 class02 class03">Test1</article>
<article class="class03 class01 class02">Test2</article>
You can use the [class="class1 class2 class3"] attribute in the css by specifying the order of classes you want.
article[class="class01 class02 class03"] {
background-color: lavenderblush;
}
article[class="class03 class01 class02"] {
background-color: brown;
}
<article class="class01 class02 class03">text</article>
<article class="class03 class01 class02">text</article>
Interesting question. I don't suggest doing it as classes aren't meant to be used like this, but I guess there's at least one way for accomplishing the desired result...
article {
width: 50px;
height: 50px;
}
article[class*="class01 class02 class03"] {
background: lavenderblush;
}
article[class*="class03 class01 class02"] {
background: brown
}
<article class="class01 class02 class03"></article>
<article class="class03 class01 class02"></article>
So we're checking that the class contains the exact provided substring, while the wildcard allows the class list to contain other classes before and after as well. When an exact match is needed we could use article[class="class03 class01 class02"].
The answer to the question is no: it is not possible to the normal common notation. Only the trick using the attribute selector as given in the other answers does work on the first look. But head up: it is not as easy as it seems.
EXPLANATION: HOW IT WORKS
Indeed you are able to calculate/controll it.
In HTML/CSS wins the element/class/id construct with highest specifity. It is a slightly complex ranking on the first view but if only used classes it is not as complicated.
For class construction a.b.c the specifity counts:
special combination off this three classes which overrides i.e. background setting of a.b.x
the total count of used classes what means this three classes overwrite i.e. background setting off a.b
NOTE ATTRIBUTE SELECTOR: One attribute selector counts as one class. So, if you have an attribute seletor [class="a b c"] it lose against c.b.a noted on another place in your stylesheet.
Order in HTML does not count for the specifity: a b c is the same combination and the same number of classes as c b a.
If a class construct (combination) with the same specifity noted twice in a CSS i.e. a.b.c: red and c.b.a: green the last notation overwrites the notation done before.
Some thinking:
Importand: the decision which concept is used to style a page is up to the coder himself!!! But even the attribute selector is a chance to realize that concept it is not the intendend way to use CSS. I asume using the rules of specifity in the intended css way could be a better/more intuitive way to control the design.
Links with information about specifity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specifishity.com/
Can I use global div and give properties without using class or id?
Example
div{
font-family:"Arial";
font-size: 14px;
}
It is not considered a bad practice, it is just one of many ways to create a rule in CSS. By setting this directly on the div tag, you are creating a default rule for the tag, which is a practice that browsers follow as well. For instance, the user-agent stylesheet for Google Chrome specifies that the default rule for div tags is the following:
div {
display: block;
}
you can use TAG name or .classname or #ID of the element in CSS!
example:
div {} `Tag name : <div></div>`
.mydiv {} `classname : <div class="mydiv"></div>`
#mydiv {} `ID : <div id="mydiv"></div>`
yes, you can use global div and give it properties without using class or id.
An approach like this using your example above
<style>
div {
font-family:"Arial";
font-size: 14px;
font-style: italic;
}
</style>
<div>Changed Div default values </div>
or this,
<div style="background-color:lightblue">
<h5>div using global attribute "style"</h5>
</div>
And no, it is not a bad practice.
class is mostly useful when you have more than one element that would share the same style for consistency of the page or site.
id should be unique and can only be used once(single element). Ideally, used in main div.
But overall, they can be omitted if you think that you won't be needing them now and in the future.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
I have a id based CSS file where I noticed I'm mostly repeating myself. What I'd like to do is specify that an item with an id follows a certain class + some other rules. For example: I'd like id id1 to have all the properties of class LinkButton applied as well as the value back-color: green. Is there a way to do this in the css file? Is there a better way to do what I'm looking at?
You can specify multiple selectors on a given set of properties, like this:
.LinkButton , #id1 { color: red; border: solid 1px blue; } /* Both get these */
#id1 { back-color: green; } /* Adding rules */
It can also override any of the properties if you need:
.LinkButton , #id1 { color: red; back-color: red; } /* Both get these */
#id1 { back-color: green; } /* Changing rules */
Or you give the element the class and ID:
<div id="id1" class="LinkButton ">
There's no need to work with ID based style sheets. Avoiding repetition is exactly what classes are there for. Why not use classes instead of IDs? They are much more flexible, and take away nothing. (You can still target speficic elements.)
You can combine multiple CSS classes wonderfully (except for IE6, whose interpretation of multiple classes is broken.)
<span class="info extrabig highlight"> Important hint </span>
if you have a particular element that needs really specific rules, then give it a class named after its ID:
<span id="really_special" class="id_really_special info extrabig highlight">
and define the unique properties of the element in the .id_really_special class.
IDs are there to access elements through the DOM imo. Styling should really be left to classes.