I have this heading:
<h3>Contact info</h3>
Writing a class or a href to it it's not an option. It is in wordpress' user-edit.php file. I want to hide this element on the user's profile pages.
Is there any solution something like this?
h3["Contact info"] {
display: none !important; visibility: hidden;
}
Thank you for your help!
There is no way to can match an element based on a complete absence of attributes.
The closest you could come would be to test for the absence of some specific attributes.
h3:not([id]):not([class]) { }
Use the nth-of-type pseudo class. Suppose the h3 you want to hide is the fourth h3 element under the parent h2 heading, and that h2 heading is the third h2 on the page (I'll assume you only have one h1 heading). Then you use:
h2:nth-of-type(2) h3:nth-of-type(4) {...}
Just bear in mind that if you later add a new h3 heading before the one you are hiding, so changing the count, then you will have to change the number in the brackets.
But don't use display none and visibility:hidden together. Choose the one you actually want - display:none closes up the space the hidden element was taking, visibility hidden reserves the space even while hiding the element. They are contradictory. Also don't use !important unless you absolutely have to (see other StackOverflow answers as to why).
if you only have one h3
h3{
display: none !important;/* visibility: hidden;*/
}
otherwise you could use attr selectors like h3[title~=yourTitle],
another option is to use child selectors
div > h3
Related
I was creating a navbar that has a class top-navbar. I included a few anchor tags in the div. When I used the CSS property color: black on the class, the anchor text was still blue(the original color). Instead when I used the property color: black on the anchor tag itself it works? Why doesn't it work on the class property, isn't it inherited by all elements that follow in the div with class = nav-bar-items The markup is as follows:
<div class="top-navbar">
<img class="logo-img" src="https://freesvg.org/download/47093">
<div class="nav-bar-items">
about
notes
contact
</div>
</div>
There are lot of solution you already know how to turn your anchor text black.
But your question was why is is not inheriting? Here is my explanation of why it didn't work for you for provided css.
CSS Specificity
Rule to calculate specificity is defined by {style, ids, [classes, attributes and pseudo-classes], [elements and pseudo-elements] }
If we calculate the specificity of selectors on anchor tag, we will have the answer.
a:-webkit-any-link (User Agent) -> 0011 (1 for pseudo-classes and 1
for element)
.top-navbar -> 0010
So clearly here user agent styling wins and take over so the color is still blue, check below snapshot.
Reference to read more about it -
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://specificity.keegan.st/
https://css-tricks.com/specifics-on-css-specificity/
I honestly don't know why and I am pretty sure it was already answered here on SO, but why even bother with it when you can just target your links? Just some Examples, there's even more ways:
.nav-bar-items a {
color:red;
}
.nav-bar-items > *{
color:red;
}
Read about selectors:
CSS_Selectors
The a tags are getting browser default styling and need something more specific to override it:
.nav-bar-items a {
color: black;
}
The <a> tags are loaded with default styling properties. There are different methods to customize.
1. By using inheritance
.nav-bar-items > a {
color: inherit;
text-decoration: inherit;
};
2. override
.nav-bar-items a {
color:color-name;
};
3. This one is only, if your parent class has a single child <a> tag then you can use it.
a:only-child {
color: color-name;
};
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 have a template that has a lot of CSS formatting, but now when I try to add my text I cannot add any formatting to it. Within a paragraph, I try to put superscripts, italics, but nothing works. Is there a way around this?
Here's a little explaination about overiding CSS
I'll take for my example this simple HTML :
<div id='home' class='current'></div>
If you have, for example, a css like
#home{color : blue;}
.current{color : orange;}
The text will be blue since #home is "stronger"
If we put values to selector: id=10 class=5 node selector (div) = 1
so #home = 10 and is higher than .current wich equal 5, #homestyles will override.
you could use li.current but again, 5+1=6 wich is lower than an id.
But #home.current will equal 15! Wich will overide #home styles!
But if your color style is on the node itself within the attribute style="" you have to remove it with jquery or use !important :
.current{
color: blue !important;
}
It will override EVERY css but it is not recommended.
Note that the value i am using are not the exact one, so .parentClass .class will maybe not over an id and i can't find the original values... But keep in mind that the more selective you are, the more chance you have to override a style.
At last, if you have 2 selector with the same value, the last one called will be the one overriding.
Use chrome inspector or firebug to see what's overriding what.
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->