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;
}
Related
I was trying to create an effect when I hover over a list element and not the anchor tag. For example, doing this:
#wrapper ul.menu li:hover {
color: #ff0000;
}
This will not change my color because I have an anchor tag style nested deeper, so I tried this and it works:
#wrapper ul.menu li:hover a {
color: #ff0000;
}
but I'm not sure if it is valid CSS to select elements after pseudo classes.
Any number of pseudo-classes can appear in any part of a selector. You are given the freedom to style a sibling or a descendant or otherwise any element that isn't the one to which you're applying the pseudo-class, whatever that pseudo-class may be, according to your needs.
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/
I have a simple menu styled with css.
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
Is it possible to apply specific style to li element, containing a with active class.
I've tryed something like this:
#container > ul > li a.active < li {
custom: style;
}
Not possible with CSS. Though this can be achieved with scripting.
Similar question here.
Apply CSS styles to an element depending on its child elements
No, selectors can't match in reverse. In such circumstances the best approach is to simplify the matter.
A elements can be styled as block level elements, so simply push down whatever styles you had on the parent LI to the A elements. You already have your specific selector a.active, that should be distinct enough that you can style them appropriately.
#container ul li a.active{ yourstyle:styleproperties;}
or I think you may want to do like this
#container ul li a:active{ yourstyle:styleproperties;}
if you want dynamically add class to element you can use javascript and jquery
http://api.jquery.com/addClass/
$("#container ul li a").addClass("active");
and for parent(this class will be added for li element which is parent to a.active element)
$('#container ul li a.active').parent().addClass("active");
there is already similar topic Target outer div based on class of inner a
Try this:
ul li a.active{ color:green;}
http://jsfiddle.net/Vloxxity/VZgQx/
Edit:
i've read your comment,
this is only possible if you mark the li with a active class.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does “>” mean in CSS rules?
I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :
#navigation ul li > ul {
/* some code in between */
}
but when i omit the > sign as
#navigation ul li ul {
/* some code in between */
}
this still works the same way.
what is the difference and when to use > sign ?
> Means the direct child of a selector, so
li > a will ONLY match an <a> which is directly inside an <li> for example.
If the html was <li><span><a> the <a> would not be matched.
Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in
<li><a> but also in <li><span><a>, for example.
Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
The > means a child element - it is the child selector. That is, directly / immediately nested after.
So, in your first example, the ul at the end of the selector must be directly descending from the li.
The "li > ul" syntax specifies that the ul must be a child of li. "li ul" instead says that the the styled ul is descendant of li, no matter how many levels below.
selector[1] > selector[2]{
[property]: value
}
This is called the child selector. In browsers that support it, it applies the styles to selector2 child elements of selector1.
Edit:
The second one you use I believe is called the Descendant selectors.
They should work identically, but it's there's a little difference. The decendant selector will apply to ALL decendants ,whereas the child selector applies only to the direct children of the parent.
You would use > when you want to target a direct descendant.
For example, .foo > .bar would target .bar only if it is the direct child, while .foo .bar would target any descendant of .foo that has the class .bar.
> is to be used when the second operand/element is a child of the first operand/element. When it's omitted; descendants are matched, which includes children.
Therefore, if your HTML is structured as you suggested (#navigation ul li ul) then if you have the following in your CSS:
#navigation ul {color:red;}
Then both #navigation ul AND #navigation ul li ul will be coloured red (the text) as they BOTH are descendants of #navigation ul.
But if you had the following in your CSS:
#navigation > ul {color:red;}
Then only #navigation ul would be coloured red as it is the only ul which is a direct child of #navigation
The ">" selector is the child selector, space is the descendant selector. If tag3 is inside of tag2, which is inside tag1, and you use a child selector, then your css rule won't apply to tag3 if you refer to tag3 inside of tag1, however, if you use the descendant selector, tag3 will be transitively inside tag1. This means that he descendant selector is more general than the child selector.
#navigation ul li > ul {
/* some code in between */
}
is more specific than
#navigation ul li ul {
/* some code in between */
}
because between the li tag inside the ul tag inside the tag with the id of navigation needs ul to be a direct child in the first example and in the second example ul doesn't need to be directly the child of li, li might have a child which is the parent of ul.
> is the child selector.
It will only select immediate children of the previous element. If it there is a
#navigation ul li ul li ul
element it will not be affected by the
#navigation ul li > ul
selector. But the
#navigation ul li ul
will be.
EDIT: #Nix is right, but he isn't telling the whole truth it seems. *Why isn't the p-enclosed ul ignored but only the span-enclosed? display: block vs inline perhaps? Who knows?
So if I have a CSS class named "class-name", what does the following mean?
.class-name {
margin: 0;
}
And why, if I had the following HTML
<div id="some-id">
<ul>
<li class="class-name">
...
would the selector
#some-id .class-name ul li
not exist?
.class_name means select elements with that class.
#some-id .class-name ul li means "select the li elements that are within ul elements that are within elements with the class 'class_name' that are within in the inner html of the element named 'some-id'"
The first one means what you probably think it means: Any HTML element with the class class-name will have a margin of 0 width (for each side, ie. top, bottom, left and right).
The second question is a bit more subtle. This selector
#some-id .class-name ul li
Applies only to an li that is found under a ul, found under an element with a class of class-name, found under an element with id some-id.
You would have to use a selector like this to apply to the HTML you have above:
#some-id ul li.class-name
Note that there is no space between li and .class-name in that selector. Specifying li.class-name means "an li with the class name class-name", whereas li .class-name (with a space) would mean "element with class class-name found below an li".
#some-id ul li.class-name
is prob what u need..
#some-id .class-name ul li
targets li descendants of ul descendants of the class name under #some-id
Because the class-name is on the li not as an element wrapping the li.
To clarify:
<div id="some-id">
<div class="class-name">
<ul>
<li>
Would match the selector string you mention.
.class-name specifies an element that has the class class-name. The selector #some-id .class-name ul li specifies a li that's a descendent of ul that's a descendent of some element with the class class-name that's a descendent of #some-id. To specify a particular kind of element that has the class class-name, you would do tag.class-name — for example, div.author-credit.
That selector expects a ul and li under an element with .class-name. Your HTML structure matches the following selector
#some-id ul li.class-name
You've got the selector out of order, to select the li's that are "class-name" classes would be:
#some-id ul li.class-name
Just skip using selectors in most cases. It makes the css easier to write read and use. also your programmer. Yes you can use them to apply CSS but that what classes are for the ID is for scripts to find elements and replace them or other programs to retrive info from them etc.
You can really screw things up, now or in the future by using the id's for CSS.