How can I change the text which is contained in <p> tags by using CSS's pseudo class selectors?
For example, when I hover over a paragraph, the content of paragraph must change to what would be specified in p:hover selector.
jsFiddle.
One way is to use p:hover:before along with the content attribute.
Here's an example:
Html:
<p>
<span>First text!</span>
</p>
CSS:
p:hover span {
display:none
}
p:hover:before {
content:"Second text appears instead!";
color:red;
}
If you'd like to know more about the content property, check out this nice little article.
Zenith has a simpler solution, but the following allows you to put formatting in your "hover" content. Try the following HTML:
<p>
<span class="normalDisplay">Text to display <em>usually</em>.</span>
<span class="hoverDisplay">Text to display on <em>hover</em>.</span>
</p>
and the following CSS:
p .hoverDisplay {
display: none;
}
p .normalDisplay {
display: inline;
}
p:hover .hoverDisplay {
display: inline;
}
p:hover .normalDisplay {
display: none;
}
Fiddle
Related
Lets say i have this structure :
<li>Something something <input type="checkbox"></li>
How could i apply a simple text-decoration: line-through; to li content when checkbox is checked ?
I tried this with no luck using the & sass selector :
li {
& input:checked {
text-decoration: line-through;
}
}
EDIT :
I appreciate all the answers,however i was looking to do this using sass,i thought the & parent selector has this functionality but after i researched a little bit,i found out its not meant to be used that way.
Nevertheless,i found a solution without tweaking my structure or add javascript,i found out that bootstrap does not constrain you to place the checkbox after the li content in order to show it in the far right position,you can place it before and it automatically sticks it to the right,so i did that and placed the li content inside a span,so i just selected input:checked + span which gave me the desired result.
You can't do it. A Element has only access to his child and siblings.
With the siblings there is a neat trick where you can achive a similar result.
At first you need to move your checkbox at the beginning (html) so you can style the next siblings with ~ selector.
Then you can apply some css rules to the parent to swap back to order.
div {
display: flex;
flex-flow: row-reverse;
}
div input[type="checkbox"]:checked ~ span {
text-decoration: underline;
}
<div>
<input type="checkbox">
<span>Hallo Text</span>
</div>
Sorry but you can´t, you need javascript or SassScript to do that, you can try this https://sass-lang.com/documentation/style-rules/parent-selector
You don't need Javascript for this, but you do need to be able to add something to your HTML.
You can do it if you are able to add an element - put the text into its own div and putting it after the input.
Then use CSS grid on the li element, changing the order that the input and the div are shown. This just changes the visual order so you can still use the + sign to indicate the element which is the immediately following sibling of the input.
li {
display: inline-grid;
grid-template-columns: auto auto;
}
li input:nth-child(1) {
order: 2;
}
li div:nth-child(2) {
order: 1;
}
input:checked+div {
text-decoration: line-through;
}
<ul>
<li><input id='input' type="checkbox">
<div>Something something</div>
</li>
</ul>
i have the following Div:-
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">
and i am trying to hide it using this css, but the div is not been hide:-
[data-automation-id]="pageHeader"
{
display:none;
}
any advice?
Your selector syntax is a bit off. It should be element[attribute="value"] to style a element from it's custom attribute. Attribute Selectors - MDN
div[data-automation-id="pageHeader"] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
If the HTML element won't always be a <div>, you can also use this selector syntax [attr=value] which represents elements with an attribute name of attr whose value is exactly value.
[data-automation-id=pageHeader] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
How Can I hide a content for specific page in css.
I find on the internet some solutions but they only valid for element's id.
This code is an example
.page-id-47 #header-image-id { display: none; }
I want to apply this on a class not id because some content does not have id I tried to use this but it does not work with me:
.page-id-47 #header-image-class-name { display: none; }
and also this code is hide the class for the whole website:
.class-name{
display:none;
}
Any help please?
Try using visibility: hidden, as shown below :-
.myClass{
visibility: hidden;
}
<div class="myClass">
<h1>hello</h1>
</div>
Use the following CSS
body .page-id-47 .header-image-class-name {
display: none;
}
After body give a space and type .page-id-47 .header-image-class-name {display: none;}
I have a class like this
.mydiv a {
color: #014BA4;
}
How can I use this class for the span element ? (Without adding/modifying the CSS file - I have no right to do)
<div class="mydiv">
This text is #014BA4
<span>How can I use the above class</span>
</div>
A terrible solution, but desperate times call for desperate measures; If you wrap your span in an anchor tag with the href attribute set to # and then stop the default behaviour...
<div class="mydiv">
This text is #014BA4
<span>How can I use the above class</span>
</div>
You would never normally do this but if it has to be done and you absolutely can't edit your css file then it's the only way I can think of.
Try this
.mySpan,.mydiv a {
color:#014BA4;
}
<div class="mydiv">
This text is #014BA4
<span class="mySpan">How can I use the above class</span>
</div>
Update your CSS as mentioned below :
.mydiv a,.mydiv span {
color:#014BA4;
}
This will add the styles to all spans
.mydiv a, span {
color:#014BA4;
}
to add this to a particular span
.mydiv a,.mydiv span {
color:#014BA4;
}
and apply the class to the span
asdf
Try this
.mydiv a,.mydiv {
color:#014BA4;
}
just .mydiv span would do the trick
.mydiv span{
color:#014BA4;
}
Try to this
.mydiv span, .mydiv a{
color:#014BA4;
}
if you used to all element inner .mydiv than used to this css
.mydiv{
color:#014BA4;
}
This will make Each Next <span> after <a> with the same stile:
.mydiv a,
.mydiv a + span {
color: #014BA4;
}
Example: http://jsfiddle.net/verber/F8CZF/13/
<a href="/admin/menu_bars/select">
<div class="action_box right">
Manage Menu Bars
</div>
</a>
a .action_box {
text-decoration: none;
}
doesn't work =\
Your code is trying to remove the underline from the div (which probably doesn't have one) rather than the link (which probably does). Simply
a {
text-decoration: none;
}
will work, although that will remove the underline from all links.
If you need to be more specific to that link then use
<a class="action_link" href="/admin/menu_bars/select">
<div class="action_box right">
Manage Menu Bars
</div>
</a>
a.action_link {
text-decoration: none;
}
This assumes that the underline is in fact a text-decoration on the link element and not a border-bottom on the div.
You still need to apply the text-decoration style to the outer href tag.
Example follows:
<html>
<head>
<style>
.noUnderline {
text-decoration: none;
}
</style>
</head>
<body>
<a class="noUnderline" href="/admin/menu_bars/select">
<div class="action_box">
Manage Menu Bars
</div>
</a>
</body>
</html>
Problem is, it's not putting the underline under the text, it's underlining the div. Basically you'd need to define the rule at the anchor still, not for the content inside the anchor:
a, a .action_box { text-decoration: none; }
It quite possibly could be an issue of another class / property is overriding your latest attempt; however, try what Silence Dogood said:
a div .action_box {
text-decoration: none;
}
If that doesn't work we'll need to see the rest of the CSS.
Can you not just use this.
#content > ul {
text-decoration: none;
}
The above obviously is my own.
You are trying to remove underline from div which is inside the anchor tag
Simply use
a{
text-decoration: none;
}
You can give id to anchor tag for better use,
<a id="linkid" href="/admin/menu_bars/select">
<div class="action_box right">
Manage Menu Bars
</div>
</a>
and use css
a#linkid{
text-decoration: none;
}