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>
Related
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.
On inspecting a webpage, I found an HTML element of interest, and looked at its css style properties below.
.Node-bullet:before {
font-family: "IcoMoon", sans-serif;
font-size: 16px;
content: "\e90d";
}
I am trying to use stylish (chrome plugin) to overwrite that CSS.
.Node-bullet:before[content="\e90d"]{
content: none !important;
}
Its not working unfortunately. Is there a way to specifically search for a CSS class with an existing attribute[content], filter its value [\e90d], and overwrite it?
I know this is not efficient for production-level sites, I'm simply modifying my notetaking app client-side. I've tried looking at other selectors like descendent but I can't seem to find an easy pattern
EDIT
Overall HTML structure looks like this:
<div class="Node-self">
<div class="Node-bullet">
::before <!-- SELECT THIS -->
::after
</div>
</div>
<div class="Node-self is-collapsed">
<div class="Node-bullet">
::before <!--DO NOT SELECT THIS -->
::after
</div>
</div>
content is a property, before a selector: you can not mix them.
For example you can find all anchor with attribute target _blank, but not with specific "content" or "background".
a[target=_blank] {
}
Not the specific answer to this problem, but the answer to the overall issue I had using a NOT with a descendent selector
.Node-self:not(.is-collapsed)>.Node-bullet:before{
content: none !important;
}
Say you get a page that is already designed but they forgot to include heading tags.
Now you are asked to include h2,h3,h4 here and there.
Those tags already have styles, but you want that style to be ignored. Is there a one line declaration that would ignore the styles instead of overwriting them one by one?
I am looking for something like this:
.class-where-headings-dont-have-styles h2{
ignore general h2 styles;
}
I guess I can attach a .no-style class to my h2 and whenever an h2 is styled add h2:not(.no-style) but I hope there is a better solution
Let me know if this solution works out for you:
You would use the not() function in css. So it would look something like this:
h2:not(.classwithoutheadingstyles){
/* bunch of style properties meant for other h2 elements without that class name */
}
If you want to add another h2 class or two into the mix, the syntax would look like this:
h2:not(.class1):not(.class2):not(.class3):not(#id1){
...
}
You could use all but it's still not implemented in Edge.
.reset{
all: unset;
}
Method 1:
Give a class name to the parent of h1,h2,h3 and apply styles
For eg:
<style>
.added-class h2{
color:black;
}
<div class="initial-class added-class">
<h2>ABCD</h2>
</div>
Method 2:
Add class to h1,h2,h3 and apply styles using !important
<style>
.added-h2{
color:black;
}
<style>
<h2 class="added-h2">
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'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.