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;
}
Related
I read elsewhere that the following should capitalize the first letter of the text of an inline element (e.g. a <span>).
However, if you run the code snippet you'll see that it doesn't work. If I replace the <span> with a <div> it works, but is there a way to capitalize the first letter without changing the element type?
.list .capitalize:first-letter {
text-transform: capitalize;
display: inline-block;
}
<div class="list">
<span class="capitalize">capitalize me</span>
</div>
The pseudo element ::first-letter only works if the parent element is a block element, so the span must be inline-block:
.list .capitalize {
display: inline-block;
}
.list .capitalize::first-letter {
/* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
text-transform: uppercase;
}
<div class="list">
<span class="capitalize">capitalize me</span>
</div>
Span has not default display, so you have to set it to block or something else
And it's not correct to set display property of first-letter, you should do it for entire class
.list .capitalize{
display: block;
}
.list .capitalize::first-letter {
text-transform: uppercase;
}
<div class="list">
<span class="capitalize">capitalize me</span>
</div>
You need to make the span itself display: inline-block - not the ::first-letter pseudo element.
.list .capitalize {
display: inline-block;
}
I tried to display a picture when you hover on a span-tag. I looked it up on the internet, but what I found didn't work. I now ended up with this code:
<span style="display:inline-block;">
<img class="manImg" src="_src/mypicture.jpg">
</span>
...and the question is where to put the 'hoverable' text. When I hover on that text it will show the image.
img { display: none; }
.parent:hover img { display: block; }
Example
You can do this by css only.
<span class="container">
<p class="hover-text">Hover text here</p>
<img class="manImg" src="_src/mypicture.jpg">
</span>
.container {
display: inline-block;
}
.manImg {
display: none;
}
.hover-text:hover ~ .manImg {
display: block;
}
You can do it using JavaScript on onmouseover event.
<span style="display:inline-block;" onmouseover="your javascript code">
Here is one way you can do it:
function mouseIn() {
$('.img').addClass('show');
}
function mouseOut() {
$('.img').removeClass('show');
}
$('.hover-me').hover(mouseIn, mouseOut);
.img {
display: none;
}
.img.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
<p class="hover-me">hi</p>
<img src="http://static.ddmcdn.com/en-us/apl/breedselector/images/breed-selector/dogs/breeds/australian-shepherd_01_sm.jpg" class="img">
</span>
This takes advantage of JQuery's hover. The image is hidden by default. When your mouse hovers over the text, I add a class to show the image. When your mouse stops hovering, I remove the class to hide the image again.
I'm trying to make text appear below an image when it is being hovered upon, but can't get the syntax right. I'm beginning to learn CSS, so I may not be following the best practices, please point out how I can solve my problem better!
<div class="X">
<span class="Y">
<a href="XYZ">
<span class="A"></span>
</a>
<span class="A-element">A</span>
</span>
<span class="Y">
<a href="XYZ">
<span class="B"></span>
</a>
<span class="B-element">B</span>
</span>
</div>
My CSS looks like this:
.X {
font-size: 5em;
}
.Y {
margin-left: 0.5em;
margin-right: 0.5em;
}
.A-element {
display: none;
}
.B-element {
display: none;
}
.A {
color: #fff;
}
.B {
color: #fff;
}
.A:hover .A-element {
color: #ccc;
display: block;
}
.B:hover .B-element {
color: #ccc;
display: block;
}
Hovering over .A to change the style of .A-element isn't possible with CSS because to do this we'd have to first select the parent of .A, and CSS has no parent selector.
What is possible, however, is to instead place the hover on the a element within your .Y element, and use the + adjacent sibling combinator to select the element next to it:
.Y a:hover + span + span {
color: #ccc;
display: block;
}
As you can see, I haven't had to use the .A-element or .B-element classes at all as this will apply to both your .A-element and .B-element elements.
Simplified Code Snippet
.Y a:hover + span {
background: tomato;
color: #fff;
padding: 0 20px;
}
<div class="X">
<span class="Y">
<a href="XYZ">
<span class="A">Hover here</span>
</a>
<span class="A-element">A</span>
</span>
<span class="Y">
<a href="XYZ">
<span class="B">Hover here</span>
</a>
<span class="B-element">B</span>
</span>
</div>
you can use hover on parent element. for example
.Y:hover .A-element {
color: #ccc;
display: block;
}
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; }
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;
}