i have the following Div:-
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">
and i am trying to hide it using this css, but the div is not been hide:-
[data-automation-id]="pageHeader"
{
display:none;
}
any advice?
Your selector syntax is a bit off. It should be element[attribute="value"] to style a element from it's custom attribute. Attribute Selectors - MDN
div[data-automation-id="pageHeader"] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
If the HTML element won't always be a <div>, you can also use this selector syntax [attr=value] which represents elements with an attribute name of attr whose value is exactly value.
[data-automation-id=pageHeader] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
Related
I'm trying to get my head around the not selector is css. I'm trying to hide a div called "InfoRow" if the page doesn't have a class of 'home'
My first stab at this:
:not(body.home #InfoRow) {
display:none;
}
From MDN:
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
:not(.foo) will match anything that isn't .foo, including <html> and <body>
As the class .home would be set on the <body> tag, and #InfoRow is a child of <body>, you'd have to write it like this:
body:not(.home) #InfoRow {
display: none;
}
I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.
I have a div element with an inline styling
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
My CSS
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible
}
Here the hover effect is not applying. That is, the overflow: visible rule is not taking.
Note: Moving the overflow:hidden from inline style will fix the issue.
I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario?
All else being equal, inline styles take precedence over styles applied via stylesheet rules. In your case, when hovering, the overflow: visible is invoked via the stylesheet rule, but that cannot override the inline style. If necessary, you could try !important.
#text-sample {
width: 200px;
white-space: nowrap;
}
#text-sample:hover {
overflow: visible !important;
}
<div id="text-sample" style="overflow:hidden;">
This is a sample text to test the CSS behavior of inline styling
</div>
But it would be easier simply to specify overflow: hidden in the #text-sample stylesheet rule, instead of giving it inline.
Your inline style will always override your external CSS.
You can use !important in :hover
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible!important;
}
Inline styles take precedence over style sheets. There are two ways to change that: using JavaScript or using !important in the style sheet.
#text-sample:hover {
overflow:visible !important;
}
In CSS, there's something called Specificity. Simply said, something like
#id { color: red; }
would take precedence over something like
.blue { color: red; }
when having something like <div id="id" class="blue">. See example below.
This is because an ID selector (#) is interpreted as more important than a class. In the same manner, an equally specific selector with a later declaration (later in the file) takes precedence and the more specific your selector gets, the more important it is.
For your example: An inline-style takes precedence over anything written in a CSS file (unless using !important). I believe the :hover does not change anything on that fact.
For the detailed rules look my link above.
div {
width:200px;
white-space: nowrap;
}
#text-sample:hover,
#sample-2:hover {
overflow:visible;
}
#sample-2 {
overflow: hidden;
}
#foo {
color: red;
}
.blue {
color: blue;
}
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>
<div id="foo" class="blue">foo</div>
EDIT
As mentioned in comments, Specificity does not apply to inline styles. Nevertheless, inline styles are taking precedence over anything in a CSS declarations in files. However, as soon as you move the rule into the same CSS file (as you mentioned will work), the :hover is more important than the other rule since it is more specific in the moment you're hovering.
I'm trying to hide the text of this content:
<div class="avrow">Powered by Altervista Mailing List</div>
I tried:
.avrow > .avlink disclaimer > a
{
visibility: hidden;
}
not seems to working anyway, how can I fix this?
Your a tag has the class .avlink and .disclaimer. So the order of your CSS is wrong and if you have 2 classes on one element, you will need to append both class names.
.avrow > a.avlink.disclaimer {
display:none;
}
<div class="avrow">Powered by Altervista Mailing List</div>
If you are trying to hidde an specific element, you can try the next ones:
By Css
display: none
By HTML´s tag:
<div hidden>Your element, could be others elements as well</div>
The problem is that the .avlink class is not a child of a, but at the same level.
The following will achieve what you're going for:
.avrow > a.avlink
{
visibility: hidden;
}
See http://jsbin.com/holivirofe/edit?html,css,js,output for a working example.
Here you are:
.avrow {
display: none;
}
.avrow > a
{
visibility: hidden;
}
You could also take one of the class names like I did below.
.disclaimer {
display: none;
}
.disclaimer {
visibility: hidden
}
There two common ways of hiding elements in CSS. The first is the visibility property that you have been using. This simply hides the element but maintains it's properties such as size and margins. Therefore it has the effect of looking like it is not "hiding" the element correctly.
The other way is using the display property. By setting the display property to hidden it efectively renders the HTML as if the element is not there. This means the other elements are not affected by the hidden one.
Also your css selector is incorrect, it suggests there should be an anchor element below .avlink. Your selector should actually be:
.avrow>a.avlink.disclaimer
Is it possible to add conditional formatting to change class on using hover effect on a div:
.resize:hover {
height: 360px;
z-index: 1;
.font_white {
color: blue;
}
}
.font_white{
color: white;
}
Is it possible to override font_white while hovering div with resize class? These classes are independent div's.
No it's not, not using pure CSS that is.
You can use JS, but without the code of your markup, it's hard to say what the best way is.
(Of course, if the font color is to be applied inside the div you hover, it is doable using CSS only, although not the way you describe it. But I assume you want to trigger style changes across the page by hovering a div.)
There is no generic way to achieve that with CSS.
If you can write a selector that matches both the element that is a member of the resize class and the element that is a member of the font_white class (which you would do using a combinator such as descendant, child or sibling) then you can use the combinator to achieve it.
For example:
.resize:hover ~ .font_white { ... }
would work if your HTML looked something like:
<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>
You would need to select apropriate combinators for your particular HTML.
If you rewrite your CSS, you'll see that your desired effect is possible - and achievable without redefining the style declarations of your class.
Example:
.primary-text {
color: white;
}
.resize:hover {
height: 360px;
z-index: 1;
}
.resize:hover .primary-text {
color: blue;
}
You may have multiple classes on an element separated by a space:
<div class="header contaminated">...</div>
and you can target that div using .header.contaminated selector.
That's fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:
Example
<div class="contaminated">
<div class="header">...</div>
</div>
Normally i want to style a header as blue:
.header { background-color: #99FFFF; }
But if a div is contaminated then i color the entire background red:
.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }
Except i don't think the css selector syntax .contaminated.header is valid for "inherited" styles.
Note: The reason i don't think it's valid is because it doesn't work
Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?
jsFiddle sandbox
This is basic CSS - separate the class names by a space, that implies/applies the cascade:
.contaminated .header { ... }
Anything wrong with that?
Cheers
I'm confused as to your question, wouldn't this do it?
.contaminated .header { background-color: HotPink; }
Notice the space, saying "look for an element with a class of .header within an element with a class of .contaminated"
.contaminated>.header{}
will only target element header that are direct children of .contaminated