I have the following html
<span id="ctl00">
<span><a class="ms-sitemapdirectional" href="/lnd">Team Site</a></span>
<span> > </span>
<span><a class="ms-sitemapdirectional" href="url.aspx">lnd test</a></span>
<span> > </span>
<span class="ms-sitemapdirectional">Portal</span>
</span>
I can't edit and I need to hide the links and the > (>) and only keep the last span (Portal). How can I achieve this with CSS only?
I tried something like:
#ctl00>span {visibility:hidden;}
span.ms-sitemapdirectional {visibility: visible}
a.ms-sitemapdirectional {display: none}
Any ideas?
Thanks
Try this:
#ctl00 span { display: none; }
#ctl00 span.ms-sitemapdirectional { display: inline; }
Related
I have a problem to change <span> in CSS without changing anything on <span class="something">
HTML
<span class="something">Some text</span>
<span>Another text</span>
CSS
span.something {
color: #FFF;
}
span {
display: block;
}
I'm expecting that all other <span> will have the style of display:block except for <span class="something">. Appreciate if anyone could help me on this. Thanks!
I think you are looking for the :not selector which you can use as
span:not(.something) {
display: block;
}
The css negation pseudo-class is what you want.
span.something {
color: #FFF;
}
span:not(.something) {
display: block;
}
I'd like to create a program where in:
* When you click Span 1, Span 2 will be displayed and Span 1 will be disabled.
* When you click Span 2, Span 1 will be displayed and Span 2 will be disabled.
This is my codes and I think it's strange. Your help is greatly appreciated.
CSS
body {
display: block;
}
.span1:focus ~ .span2 {
display: none;
}
.span2:focus ~ .span1 {
display: block;
}
HTML
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
Use this css below:
body {
display: block;
}
.span1:focus{
color:gray;
}
.span2{
color:gray;
}
.span1:focus ~ .span2 {
display: inline-block;
color:black;
}
.span2:focus{
color:gray;
}
.span2:focus ~ .span1 {
color:black
}
Check the jsfiddle demo
This problem can not be solved by Pure CSS and HTML , the answer can be found by javascript.
<span class="span1" tabindex="0" onclick="span1Clciked()">Span 1</span>
<span class="span2" tabindex="0" onclick="span2Clicked()">Span 2</span>
and on javascript
<script>
function span1Clicked(){
var x = document.getElementsByClassName("span2").item(0);
x.style.visibility='hidden';
// other stuff
}
function span2Clicked(){
var x = document.getElementsByClassName("span1").item(0);
x.style.visibility='hidden';
// other stuff
}
</script>
Could be accomplished easily and with more flexibility in JavaScript. Example in jQuery:
$('span').click(function() {
$(this).css('visibility','hidden').siblings().css('visibility','visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
I have two class:
.show{display:block; visibility: visible;}
.hide{display:hidden; visibility: hidden;}
My dilemma is when screen width greater than 768px, Media query makes .hide on some element effectively, The element will be gone. That's my expectance. But when screen width smaller than 768px, Mediq query makes .show on some inline-block element effectively and there is a issue. Because the disable:block of .show class modify the element's model box.
Simply illustrate:
<span></span><span></span><span></span><span></span>
Add the .show will be turned:
<span></span>
<span></span>
<span></span>
<span></span>
How do I avoid change the model box when I want a element be visible?
UPDATE:
I have a answer not yet test.
.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}
Not only display can be achieved it.
you can use visibility height. Like this:
.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}
I'd go with for inline elements
.show {display:inline;}
.hide {display:none;}
Or for CSS3 only .show {display:initial;}
Another option would be to code around you're elements, but it gets messy
.hide {display:none;}
.show {display:inline;}
a.show, span.show, ...etc {display:inline;}
td.show {display:table-cell;}
You can see where this is headed.
You're better off just removing the .hide class than adding the .show class as well. By just removing the hide class or adjusting your media query, the element should rever to its natural state.
Update as you mention media queries, perhaps this is more of an example of what you are after:
#media screen and (max-width: 50em) {
.hideNarrow {display:none;}
}
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
PLay with it here where you can slide the page width: http://jsfiddle.net/of2yc9nu/2/
try:
.show {
display: inherit;
}
try this
.hide {
display: none;
}
.show {
display: inline-block;
}
<span class="show">1</span>
<span class="hide">2</span>
<span class="show">3</span>
<span class="hide">4</span>
<span class="show">5</span>
.show{
visibility : visible;
height: auto;
}
.hide{
visibility : hidden;
height: 0;
}
<span class="show">Span1</span>
<span class="show">Span2</span>
<span class="hide">Span3</span>
<div class="show">div1</div>
<div class="show">div2</div>
This will work.
I have the following code:
<div class="filter-field">
<span class="filter-title">Number From</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
</span>
</div>
and this stylesheet:
.filter-field {
height: 20px;
display: inline;
}
.filter-title {
width:90px;
display: inline;
padding-right:10px;
}
.filter-extension {
width: 40px;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
display: inline;
}
but each span is displayed on a new line like this:
Number From
TextBox
To
TextBox
when it's supposed to be something like
Number From [space] TextBox [more
spaces] To [space] TextBox
How can I achieve this through css without changing the tags I'm using? (actually read: without using tables.)
What you have displays inline already, you have some other CSS (that has a more specific selector) creating the block type display. Or...the textboxes (whatever the rendered version looks like) are display: block; themselves.
Those custom ASP textboxes are almost certainly rendering the textbox within a <div>. Adding this to your CSS should do the trick:
.filter-control * { display:inline !important;}
If that textbox control accepts the CssClass attribute, you could also try
.inline { display:inline; }
<dx:ASPxTextBox ID="FilterNumberXXXXXX" runat="server" CssClass="inline" />
Wrap your text in a block-level element such as a paragraph or heading:
<div class="filter-field">
<p>
<span class="filter-title">Number From</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
</span>
</p>
</div>
Your styles shouldn't need to be set to inline if they're spans, so your CSS becomes:
.filter-field {
height: 20px;
}
.filter-title {
width:90px;
padding-right:10px;
}
.filter-extension {
width: 40px;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
}
At worst, you might replace your display: inline; declarations with float: left; but I don't see why you'd need to.
If you are still having problems, I would suggest your span styles are probably inheriting a display: block; property from elsewhere in your CSS.
Try
.filter-field {
height: 20px;
display:block;
overflow:hidden;
}
The problem might be that you actually don't mean to display a box (div) but a paragraph (p). You can do the following and it should work.
In your styles:
.filter-field span{
padding-right:10px;
}
In your markup:
<p class="filter-field">
<span class="filter-title">Number From</span>
<span class="filter-control">
Hello
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
Goodbye
</span>
</p>
Also remember that CSS inherits rules, so the problem could be somewhere else. Using Firebug or any other browser inspection tool could de helpful to determine what's going on.
Use firebug to check which rules are being applied to your elements. As Nick suggested there is probably a more specific selector adding a display: block style to the spans that should be inline by default.
If there is a specific rule (based on an id) you can make your rules more specific by:
Adding an id to your div and making your css rules apply to that id
Finding the applied rule, to which ID it refers, and making your CSS rules apply to that ID:
#the_id .filter-field span {
display: inline;
}
I need a quick help:
I have a CSS like this:
#ranking li span.awa
{
//Something
}
And HTML like this:
<span class=\"awa\">
<div >
<a href=''>
<img src=''>
</a>
</div>
</span>
Now i don't know what is the name of img and can not put class type to img tag.
I need to set in CSS that img inside span of class awa should have border: 0px; How to do this?
In para langauge i need this:
#ranking li span.awa.img
{
border: 0px;
}
But it does not work. How to write this properly?
Use a space, just like you've used twice. A space means "somewhere inside":
#ranking li span.awa img
{
border-style: none;
}
span.awa.img, my the way, means a span with two classes: <span class="awa img">.
#ranking li span.awa img
{
border: 0px;
}
Also note your markup is invalid, <div> cannot be a child of <span> since it is a block level element.