This question already has answers here:
CSS text-decoration property cannot be overridden by child element [duplicate]
(2 answers)
Closed 9 years ago.
Apologies if this is a duplicate, but I'm enough of a CSS neophyte that I don't even know exactly what to search for.
I'm trying to modify text-decoration within a block by adding a span, and it's not working. How come? I can add a new text-decoration within the span, but I can't subtract the old one.
<h1 class="strikethrough">
stricken<span class="no-strikethrough"> no strike</span>
</h1>
http://jsfiddle.net/zV3ga/2/
Is there a way I can achieve my goal? I'd like to inherit all the properties of the h1 except the text-decoration, so I'd really prefer to have my "no strike" text inside that tag.
I have no idea why these people are saying it isn't possible. This is entirely possible via CSS.
http://jsfiddle.net/austinpray/y5bRS/
.strikethrough {
text-decoration: line-through;
color: blue;
}
.no-strikethrough {
display:inline-block;
text-decoration: none;
color: red;
}
.no-strikethrough:before {
content: '\00a0';
}
Strikethrough applies to the entire parent element. It's rendered the full width of the parent, no way to "turn off" for a child.
Any reason not to use HTML markup?
<h1>Partial <strike>stricken</strike></h1>
HTML5:
<h1>Partial <del>stricken</del></h1>
I think you are trying to keep the first part with a atrile and the second part without a strike.
So do this
<h1>
<span class="strikethrough">stricken</span> no strike
</h1>
And one more thing.
Using hyphens in the class name is fine and dandy if youre just in CSS but when you move to Javascript that will cause problems (as far as my knowlege goes). So practice that way
You can't do this in its current form, you are putting a strike on the H1 which is the parent of span, you can't have a child reverse it.
<h1 >
<span class="strikethrough">stricken</span><span class="no-strikethrough"> no strike</span>
</h1>
I do not know if it is useful for you but you may try striking span's inner.
<h1 class="no-strikethrough">
<span class="strikethrough">stricken</span> no strike
</h1>
Try it is the most optimized approach
<h1>stricken
<span class="test">no strike</span>
</h1>
.test {
text-decoration: line-through !important;
color: blue;
}
h1 {
text-decoration: none;
color: red;
}
Related
I'm trying to use a CSS :first-letter pseudo-element in a web page to enlarge and colorize the first letter of a paragraph (W), the only thing is that it's in a DIV tag and it's not displaying correctly. I have been to W3C schools and looked at the following here at Stackoverflow (css selector: first paragraph's first letter inside a div and css first-letter exclude other tags), but these don't seem to resolve my problem (more than likely I don't have the CSS setup correctly is my guess). Any help will be appreciated. Thanks.
Here is the CSS I'm using:
div homepara:first-letter {
font-size: 36px;
color: darkblue;
}
Here is the HTML I'm using:
<div class="homepara">Welcome to This Test Page.
</div>
Try this: div.homepara:first-letter. When you want to address a div with a class add a . between then.
Example
Your CSS selector isn't written correctly. Should be:
div.homepara:first-letter {
font-size: 36px;
color: darkblue;
}
div.homepara:first-letter
you just missed a '.' before the class name and there should not be space between the .classname and the div
i.e.. div.classname
DEMO
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;
}
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
I have a simple Css rule like so:
strong a:hover {
text-decoration: none;
}
This works for the following HTML:
<strong>
Go to website
</strong>
The problem is the Wysiwyg within the CMS i am using often puts the code in like so:
<strong>Go to website</strong>
My css rule then doesnt work. Is there are pure Css solution?
Thanks
Al
What you're trying to do isn't supported in CSS - you can't style the parent. A better approach here might be to add a class to the link:
Go to website
CSS:
a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }
That way the link can easily be styled. <strong> may be semantically wrong if you use it just to style the link, and not to emphasize the text (though, that might be less important, to be honest)
Working Example: http://jsbin.com/ekuza5
This should work:
.hrefspan a:hover, strong {
text-decoration: none;}
<span class="hrefspan"><a>...</a></span>
By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.
use
a:hover strong
{
text-decoration:none;
}
since you have define rule strong a:hover
indicates rules to be applied to the a tag which is present inside strong html tag
So the bit you actually want to change is the underling of the anchor
a:hover { text-decoration:none; }
If you want to have this only affect particular links on the page then apply classes to them.
<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>
a.notunderlined:hover { text-decoration:none; }
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3