<p><a href...><img... /></a></p>
The links have a border and raquo after them in the css, like so:
p a:after, .content li a:after {content: "\00a0 \00bb";}
How can I target just images within a link inside a paragraph to remove this styling?
Using this later in the css isn't working:
a img, #logo a, p a img {border:none;text-decoration:none;}
a:after img {content:"";}
UPDATE:
Did a search and replace to add a class:
<p><a ([^<]*)><img
<p><a class="imagelink" $1><img
then used this css:
a.imagelink {border:none;} a.imagelink:after {content:"";}
Unfortunately, this is simply not possible. There is no "parent selector" in CSS, so you cannot select an element based on an element that it may contain.
There are many alternatives, but all of them will require updating the anchor tag itself in some way such as adding a class.
p a.img-container:after { content: "" }
In order to "target images within a link inside a paragraph", you will need to use this CSS selector:
p a img{Your code}
You can create style attributes in a new CSS class to reverse what you specified in
p a:after, .content li a:after {content: "\00a0 \00bb";}
Sample CSS
.clearStyle{ /*attributes*/ }
Related
I'm adding a gallery feature to my blog and the gallery looks like this.
<ul id="pikeme" class="pika-thumbs">
<li>image</li>
<li>image</li>
</ul>
The gallery plugin gets is styling from .pika-thumbs li - however there is also the default blog styling .text ul li that is also applying its effects on the gallery - which I don't want. Is there a way to exclude .text ul li styling from the gallery?
Thanks!
You could use :not, e.g:
Change
.text ul li
To
.text ul:not(#pikeme) li
Or
.text ul:not(.pika-thumbs) li
More on :not from MDN
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector, or any pseudo-elements.
Demo
use the ID selector #pikeme li to override the .text ul li
As ID selector has greater priority than class selector.
css
#pikeme li { /* instead of .pika-thumbs li */
color: red;
}
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
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
I have the following:
<a class="folder"><span>Background</span></a>
and the following CSS:
ul.arbo li > a:hover span,
ul.arbo li > a.current span {
background: #999999;
}
How can I modify the CSS so it does NOT apply if the link has a class of folder. In other words so it will not apply for the above HTML
You can do in css with negation pseudo-class selector :not , as follows:
:not(.folder) {
}
See working demo (provided by insertusernamehere).
CSS3 has the :not() selector, which you can add to your CSS (or you could do this with jQuery, either way). Mind you, this will only work in newer browsers.
http://www.w3schools.com/cssref/sel_not.asp
:not(.folder)
In your instance:
ul.arbo li > a:not(.folder):hover span,
ul.arbo li > a:not(.folder).current span { }
You don't need JavaScript or jQuery for this, and you can do it without CSS3 too (which may be relevant depending on what browsers you plan on supporting).
Just add another rule to prevent the background from changing on certain elements, like this:
ul.arbo li > a.folder:hover span
{
background: inherit;
}
Working example.
:not(.folder) {
}
Is a good solutions.Don't forget to check what browser do you want too work!
:not selector is a CSS3 selector and not all the browser support it...for example IE8 and earlier do not support the :not selector.
I'm trying to expand the width of my h1 tag when you hover over the img, however I cannot seem to get it to work.
http://jsfiddle.net/xJ4dc/
Thanks.
Try this:
img:hover + h1 {
width:100%;
}
jsFiddle example.
This rule says that whenever you hover over an image, change the width of all adjacent sibling <h1> elements to 100%.
The Selector has to select the element for it to apply the rule.
In your fiddle img:hover has no desendant h1 therefore nothing happens.
In this case, since h1 is the next sibling of img:hover you can use the + selector
img:hover + h1
fiddle
you need to understand what img:hover h1 says:
upon all tags named img on :hover all child elements tags named h1
you would need to use the plus sign img:hover + h1 to work.
But I would suggest do is http://jsfiddle.net/xJ4dc/5/
<ul>
<li>
<img src="http://www.real-whitby.co.uk/wp-content/uploads/donkey.jpg" />
<h1>This is a heading</h1>
</li>
</ul>
and then:
li img {
width: 100px;
}
li h1 {
display: none;
}
li img:hover + h1 {
display: block;
}
Note that I would use display:none; and then display:block to hide and show the heading.
The selector img:hover h1 means "any h1 element that is a descendant of an img being hovered over". The problem is your h1 element isn't a descendant of your img tag, it's a sibling. You can change to using the adjacent sibling selector to get the desired effect:
img:hover + h1 {
width:300px;
}