I am trying to hide some specific adds on my page based on their href property(using CSS). I scrolled through some of the answers which tells about hiding an element based on its href value. But, the element here is quite dynamic and keeps changing every time I load the page. Is there any way to hide an element/anchor based on its partial href value ?
Below is the HTML code that I am trying to hide.
Code:
<div id="union-ad" class="union-banner">
<a href="http://someURL?Dynamic_Id's">
</div>
This is what i have been trying so far.
<style type="text/css">
a[href='someURL']{ display: none }
</style>
Use a substring selector:
a[href^="http://someURL"] {
display: none;
}
You CAN see me.
You can't see me!
Get more info on substring attribute selectors
You can use *. This finds the string partial someURL anywhere in the element's href attribute.
a[href*="someURL"]{ display: none }
Demo:
a[href*="someURL"]{
display: none;
}
<div id="union-ad" class="union-banner">
my Link
other Link
</div>
JSFiddle
You have two different choices of substring selectors, which you should select between based on the nature of the URL.
If your URL always starts with the same set of characters, including the protocol specification, then ^= is the best choice - it will only match elements which href-attribute begins with the given set of characters. This will pretty much eliminate the chance of randomly hiding other links because they randomly contain your selector.
a[href^='http://someURL'] {
display: none;
}
However if you're entirely unsure about the consistency of the URL and only know a certain part in the middle, use *=, which will match elements that contain at least one instance of the set of characters given.
a[href*='someURL'] {
display: none;
}
Yes, there's a CSS selector for that.
a[href~=someURL] { display: none }
Related
Seems that hiding a element can be done 500 ways. I'm looking what what is best for browser compatibility standards, and possibly even performance...
This is what I wish to hide:
<li class="header-menu-user"><a class="header-user" href="/Settings/User/UserProfile">User Settings</a></li>
What I have tried in the past is for another scenario in which I did a display:none on a li with a data- attribute etc..
I just tried to do this and it is not working (not hiding it)
.header-user {
display: none;
}
There are many ways but one of these two usually is appropriate:
display: none;
Will hide the element, meaning surrounding elements will ignore it as if it were not in the DOM, even though it is and you can still target it.
opacity: 0;
Will essentially make the element transparent, not visible but it still occupies space in various layout models.
You can hide a specific <a> tag like this:
li.header-menu-user a[href^="/Settings"] { display: none; }
With just using CSS Display:none; would be the way to go. The only performance impact this is really having is that you are still sending all the content that is hidden to the client browser. If you want to improve performance perhaps consider removing the content on the server side if that is an option for you.
I've got two values in my Model where either or both can contain a value. If both contain a value, I want to put a dash between them in the View. So, using span tags as containers for the properties, the output HTML will be
<span>First</span><span></span>
<span></span><span>Second</span>
<span>First</span>-<span>Second</span>
I can ViewModel this but I wanted to know if it was possible using just HTML/CSS. I've tried using the before and after CSS commands to insert the dash, but it doesn't do the job.
Any ideas if it's possible and if so, how?
CSS doesn't support inserting generated content before or after an element, so a pure solution to this isn't going to be straightforward.
If your spans need to be inline, or if you can't modify your HTML (e.g. the dash must appear between the two spans), you're better off handing this logic over to either JavaScript or the view model (or I guess both, if you're using a JavaScript MVVM framework).
If not, and you don't mind cheating a little and/or utterly trashing the semantics of your HTML, placing the dash in a third span following the first two allows you to show it using span:not(:empty) + span:not(:empty) + span and hide it otherwise.
Or, depending on how your layout works, you may be able to cheat in other ways. For example, if putting the dash in one of your spans is an option (e.g. because the spans don't have any special formatting), it's as easy as
span:not(:empty) + span:not(:empty)::before { content: '-'; }
Whichever it is, though, I suspect you'll invariably have an easier time just exposing a separate property in your view model.
So here it is a quick tricky way with just html & css complex selectors.
The base here is to include the dash - on the second element if it is not empty.
And if the first element is empty then push the second to offset and hide the dash.
div {
overflow: hidden;
line-height: 2em;
}
div span:first-child:empty {
margin-left: -10px;
}
div span:last-child:not(:empty):before {
content: "-";
width: 10px;
text-align: center;
display: inline-block;
}
<div><span>First</span><span></span></div>
<div><span></span><span>Second</span></div>
<div><span>First</span><span>Second</span></div>
Using the + adjacent selector will be like:
div {
overflow: hidden;
line-height: 2em;
}
div span:first-child:not(:empty) + span:not(:empty):before {
content: "-";
width: 10px;
text-align: center;
display: inline-block;
}
<div><span>First</span><span></span></div>
<div><span></span><span>Second</span></div>
<div><span>First</span><span>Second</span></div>
Yes, it's possible, though I think there are probably better ways to do it, like at the time the data is added.
Here's my solution.
span:nth-child(odd):not(:empty)+span:nth-child(even):not(:empty)::before {
content: '-'
}
<span>First</span><span></span>
<span></span><span>Second</span>
<span>First</span><span>Second</span>
<br><br>
<span>First</span><span></span><br>
<span></span><span>Second</span><br>
<span>First</span><span>Second</span>
What I'm saying is whenever there is an odd position span that is not empty it will update the next even position span if it's not empty with a hyphen.
I hope you find this helpful 🙂
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
<!DOCTYPE html>
<html>
<head>
<style>
.hypen-text::after {
content: "-";
}
}
</style>
</head>
<body>
<span>first</span>
<span>second</span>
<span class="hypen-text">first</span><span>second</span>
</body>
</html>
if you have still doubt refer this link https://developer.mozilla.org/en-US/docs/Web/CSS/::after
I used #Boltclock's answer
span:not(:empty) + span:not(:empty)::before { content: '-'; }
which made it surprisingly easy (when you know how) and just added classes to the spans so I can make sure it only happens where I need it to and so I can follow what's happening a bit more easily when I come back to this in a week's time :) The HTML I used is
<span class="spnAddADash">
<span class="spnValueOne">First</span>
<span class="spnValueTwo">Second</span>
</span>
And the corresponding style is
.spnAddADash .spnValueOne:not(:empty) + .spnValueTwo:not(:empty)::before {
content: '- ';
}
which both together render
First
Second
First - Second
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I am working on a responsive email template, and wish to apply display: block !important to 2 <td> elements in order to go from 2 columns to 1 column layout. Im using the following selector:
td[class="mainArticleContent"],
td[class="mainArticleImage"] {
display: block !important;
}
The thing is: these styles are not applied when i view the email in the browser (safari or chrome). They still get the user agent style: display: table-cell;
I thought that an attribute selector would have higher specificity than UA stylesheets?
if i instead write:
.mainArticleContent,
.mainArticleImage {
display: block !important;
}
Then the style get applied, and everything works as i want it to. But i am told that this can cause issues with YAHOO mail clients, as they might always show the mobile version, and that the attribute selector would be a workaround.
Can anyone shed some light on this problem for me?
You are searching for a class attribute that matches exactly that string. Since your string has something else in it, it doesn't match exactly. to match containing, you would use
td[class*="mainArticleContent"],
td[class*="mainArticleImage"] {
display: block !important;
}
See http://css-tricks.com/attribute-selectors/
I'm trying to set the rendered attribute of af:panelList on a CSS file so I can't display it according to the device resolution but when I define on CSS:
#pl2 {
rendered:false;
}
I get a unknown property "rendered" and chrome doesn't hide it when its a smaller resolution.
Heres the component definition on my .jspx file:
<af:panelList id="pl2" rows="3" maxColumns="5" >
What can i do to fix this? Is there a way around?
it renders a div with id pt1:panelobile and then a table which has no id. i added this line to the css #pt1:panelmobile { display: none; } but i have no luck so far
If you ignore deprecated browsers like IE6/7, then you should be using this selector instead:
#pt1\:panelmobile {
display: none;
}
The : is namely a special character in CSS selectors indicating a pseudo selector and therefore needs to be escaped by \ when used as-is.
But, especially in your particular case, much better is to just assign the JSF component a more generic and better reusable style class.
<af:panelList ... styleClass="hidden">
with
.hidden {
display: none;
}
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
if you are trying to hide the element, try:
#pl2
{
display: none;
}