I got this code:
<div class="class1">text</div>
CSS code of class1 is following:
.class1 {
text-decoration: none;
}
The output looks on, until I move the mouse over the div. The text is underlined then.
Sure, I've tried a lot of methods like:
.class1:hover {
text-decoration: none;
}
I've also tried to add a !important attribute, but still without expected results. :/
I've also used firebug to debug the HTML & CSS code, and I can't find any class with attribute text-decoration: underline;.
I know this is such a silly question, but I'm out of ideas.
You should set the text-decoration property to none for the a element inside of .class1, since that is the element that contains the text (and likely the element that you are hovering on).
For example:
.class1 a (all a tags whose ancestor is .class1)
OR
.class1 > a (all a tags whose parent is .class1)
If you're setting a global <a> property elsewhere, you'll need to specifically override the <a> tags for that class.
.class1 a { text-decoration: none; }
and
.class1 a:hover {text-decoration: none; }
depending on if you have a global hover defined too
div.class1 a { Properties:values}
Would be a good practice.
Related
It may just be me, but sometimes I think im starting to get the hang of this css stuff' and then it goes back to 'I dont have a clue.'
so, I have a default style
a:focus,
a:hover,
a:active {
outline: 0 none;
text-decoration: none;
color: #fff;
}
but on a couple of <a href..> I need to overwrite the style,
so I have added the following to my css
a.myBlue a.myBlue:hover {
color: #3078ef ;
}
.myBlue a:hover {
color: #3078ef ;
}
(Yes, I've done this twice)
and applied
But in Chrome, looking at developer tools its still applying the standard style, it does not even pull "myBlue" down?
Where am I going wrong?
The css selector:
a.myBlue a.myBlue:hover
Means "Any a of class myBlue that is being hovered over and is a child element of an a of class myBlue.
If you wish to apply the same style to multiple selectors, you need to separate each selector with a comma:
a.myBlue, a.myBlue:hover
There is a typo mistake in your code...Use below code. it works...
a.myBlue, a.myBlue:hover {
color: #3078ef ;
}
Your CSS selector is wrong, how you've got it present means it only applies the rule when you hover over an element with the class of .myBlue which is the child of another element with the class of .myBlue. So instead your selector needs to be
a.myBlue, a.myBlue:hover { /* notice the comma */
color: #3078ef ;
}
I just got done with my first proper web design (which was for my own site) and I've styled the first line and letter of the p tags for my articles and they work just fine, but the first letter and line of blockquotes also inherit that style and I'm simply not able to change it.
I have a feeling I'm missing something simple here. For instance, look at the blockquotes on this page.
I've tried explicitly styling the first line and letter of the blockquote but it does not seem to work. For what it's worth, I'm using first-of-type right now; I've also tried first-child but to no avail.
Update: Here's a jsfiddle --- http://bit.ly/1j70PCT
Either use the :not() pseudo class to prevent the blockquote element from being styled in the initial declaration:
.entry-content :not(blockquote) p:first-of-type:first-letter {
font-size: 2em;
}
..or overwrite the styling with a more specific selector:
.entry-content blockquote p:first-of-type:first-letter {
font-size: inherit;
}
blockquote > p:first-letter {
font-size: inherit;
}
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
I have the following CSS:
#content-button-panel ul li a.folder span {
cursor: default;
}
#content-button-panel ul li a:not(.folder) span {
cursor: pointer;
}
and the following HTML:
<a class="title-coffee"><span>Overview</span></a>
How can I make it so the HTML (with class of title-xxxxxxx) has a cursor of default? Note I need this to work with title-coffee or any class starting with title-
Why would you not just add new CSS classes like this:
.cursor {
cursor: default;
}
.pointer {
cursor: pointer;
}
And then you use each class specifically where needed like:
<a class="coffee cursor"><span>Overview</span></a>
<a class="folder pointer"><span>Pointer</span></a>
You can use one of the many attribute selectors. This one selects all a elements whose class attribute begins with "title-"
a[class^="title-"]
In your case you'd use it like this:
#content-button-panel ul li a.folder span,
#content-button-panel ul li a[class^="title-"] span {
cursor: pointer;
}
Negation with CSS can be done 2 ways 1 way:
input:not(.classA, .classB) /* personally, I've never seen this work */
or
input:not([type="radio"]):not([type="checkbox"])
Typically, I would recommend simply using a 3rd class instead of using :not. But in the case of input elements where some elements look better with the browser's default styling, writing out an inclusive selector to catch every single type I do want to style is considerably longer than writing out a negation selector for the types I don't want, I'll go for the shorter selector.
:not can be chained like any other simple selector or pseudo-class
a[class^="title-"]:not(.folder)
Here is what I would do. I would rather use ID's on each object and target them specifically as needed. In cases you are targeting a class, it makes it harder to specify specific items which is why I recommend this method.
CSS:
.defaultCursor {
cursor: default;
}
HTML:
<a id="ThisItemsID" ><span>Overview</span></a>
JS Code (wherever you need to apply the cursor, as needed):
$("#ThisItemsID").addClass('defaultCursor');
Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?
Something like
a:hover * { color: #ff0000; }
Say I have
a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...
The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles.
Thanks
There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:
div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }
You can also create a custom class just for the style you want to apply:
div a.customClass:hover { ... }
You could use * like you mentioned in the question, but apply hover to it:
div *:hover { ... }
There's also this option, where you just apply the style for all a's, although you probably know about this option already:
a:hover { ... }
Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).
Another option would be to use !important to increase the selector's specificity. For example:
a:hover { background: red !important; }
You can read more about how the specificity is calculated here.
If you want to apply a global css rule for a specific tag, write (for anchors):
a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}
If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:
a.customlink{/*your styles go here*/}
EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.
JsFiddle Example
You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }
Does a:hover { color: #ff0000; } not do what you want it to?