This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 4 years ago.
I have something like that in an AMP-Page (I cant change the structure as its given and !important is not possible for AMP):
<p class="test">hide me <a>show me</a></p>
How can I achieve hiding the html of the parent bot not the nested a-tag?
I tried this without success:
.test{display:none;}
.test a{display:block;}
and also:
.test:not(a){display:none;}
You can use font-size?
.test {
font-size: 0;
}
.test a {
font-size: 16px;
}
<p class="test">hide me <a>show me</a></p>
Using hidden and visible properties it is possible.
.test {visibility: hidden;}
a {visibility: visible;}
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 5 months ago.
I'm using UI Library(Vuetify) and this is the code it has:
.sample[data-2] {
color:red;
}
and I want to overwrite all the elements having .sample classes like this:
.sample {
color:blue;
}
If i use '!important' then it surely works,
but I want better solution to overwrite .sample[blabla] class.
I've tried .sample[*], .sample[] ... it didn't work
You can increase the specificity of your CSS by including :not pseudo class with a # id name.
The id name needs to be one not used elsewhere.
div {
margin: 10px;
}
.sample[data-2] {
color: red;
}
.sample:not(#nonExistentId) {
color: blue;
}
<h2>All these lines should be blue</h2>
<div class="sample">a div with class sample</div>
<div class="sample" data-2>a div with class sample and attribute data-2</div>
<div class="sample" anyoldattribute>a div with class sample and any old atrribute</div>
See MDN for a fuller explanation.
In particular if you need to support older browser versions you could use combinations of :is, :matches and so on.
This question already has answers here:
How can I apply styles to multiple classes at once?
(9 answers)
Closed 4 years ago.
Is theres a way with css only to apply a specific style to an element when using an id selector inside a css ??
html:
<div Id="MyClassId"> blablabla </div>
css:
.MyOwnFancyDiv{
font-size: 12pt;
color: #333333;
/* ... */
}
/**
Select a particular element and need to apply the MyOwnFancyDiv style
**/
#MyClassId{
/* want to apply the MyOwnFancyDiv style to this particular element */
}
Thanks
You asked:
I want to apply the MyOwnFancyDiv style to this particular element [the id element]
This can be done as specified -- only via CSS -- like so:
.MyOwnFancyDiv,
#MyClassId {
font-size: 12pt;
color: #333333;
/* ... */
}
This will apply all style rules to each element specified (so the class MyOwnFancyDiv and the id element MyClassId.
This should solve your question. If not, please can you edit and clarify the criteria and scope of your question. Thanks.
This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 4 years ago.
I have this kind of HTML:
<div class="meta">
link,
link,
link
</div>
How could I hide the commas with css?
I've tried:
.meta{
display: none;
}
meta a{
display: inline;
}
but this has no effect as it affects the parent. Also I tried:
.meta *:not(a){
display: none;
}
...but this removes everything, so no luck!
I finally resorted to jquery with this:
jQuery('.meta').each(function() {
var text = jQuery(this).text();
jQuery(this).text(text.replace(',', ' '));
});
...but if anyone finds a CSS solution I will give them the answer.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I have Html structure below
<div>
<div class="experimental-bar experimental-bar-minimal"></div>
</div>
<div class="experimental-border">
<div class="container"></div>
</div>
CSS:
.experimental-bar { height: 50px; }
.experimental-bar-minimal {height: 25px; }
.container { height: ~"calc('100vh - 50px')"; }
I want to change height of container when experimental-bar-minimal class is called
I have used
div:has(.experimental-bar) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 50px')";
}
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 25px')";
}
Can anybody help me out. Thanks in advance
:has is not working
There is no < Selector in CSS, and there is currently no option to style a parent element depending on one of its childs. At least not with vanilla CSS, I am not sure if this could be achieved with a preprocessor like Sass, Less or Stylus.
There acually is a > Selector, which selects only direct childs of the parent node. Please read the MDN Documentation for further info.
Ther actually is the :has pseudo class, which works like the code below, but it is currently not supported by any browsers:
.parent:has(> child) {
/* Style Rules */
}
This question already has answers here:
Is there a CSS selector for text nodes?
(3 answers)
Closed 7 years ago.
I want to totally hide everything in the .byline except the date. Is it possible to do this via CSS w/o modifying the markup? Is there a CSS selector that allows you to target the inner text that's not in tags?
<p class="byline">
By <a rel="author" href="#">John Doe</a>
on <time datetime="2012-10-10" pubdate>2012</time>
</p>
This does not work b/c it hides the a but not the other text:
.byline :not(time) { display:none }
This does not work b/c it hides everything:
.byline { display:none }
.byline time { display:inline }
This works but is not ideal b/c then you have to deal with hiding the space too:
.byline { visibility:hidden }
.byline time { visibility:visible }
See: jsfiddle.net/pxxR7/ and jsfiddle.net/pxxR7/1/
you can use font-size DEMO
.byline {font-size:0px; }
.byline time {font-size:15px}
CSS can only select elements, not bare text. That is the reason why :not(time) doesn't work (it only selects the a).
The reason why display: none and display: inline don't work is because display: none on a container prevents it and all of its contents from displaying, even if you try to set it to anything else (plus, time already displays inline by default).
#BoltClock is, of course, right that you can't select text, just elements. But, the following workaround should work:
.byline {
font-size: 0px;
color: transparent;
}
.byline time {
font-size: medium;
color: black;
}