Im trying to create a class called "deadlink" which is for any link within the GP_Content DIV, would this be valid?
/* unvisited link */
div.GP_content .deadlink a:link
{
color:#666666;
border-bottom:1px dotted #000000;
}
I think you want:
div.GP_content a.deadlink:link
{
color: #666666;
border-bottom: 1px dotted #000000;
}
If you intended for your deadlink class to be on the link then you'd want your selector to be the following.
div.GP_content a.deadlink:link
It is valid, but it works for links inside an element with the class deadlink, inside a <div> with the class GP_content.
May not be what you intend.
div.GP_content .deadlink a:link { ... }
What you've written targets all links inside elements of class deadlink which are inside the div. It sounds like what you want is actually to target links of class deadlink inside the div. That would be like this:
div.GP_content a.deadlink:link { ... }
However, from your description, it sounds like you want to target all links within the div. If it is all, rather than specific ones, just use this to target all links within the div:
div.GP_content a:link { ... }
Related
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
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 already have a css section:
.leftMemberCol
{
width:125px;
vertical-align:top;
padding: 13px;
border-width:0px;
border-collapse:separate;
border-spacing: 10px 10px;
text-align:left;
background-color:#f2f3ea;
}
for a td section (a left side bar). I want to make all of the links inside this cell be the color green.
is there any syntax like:
.leftMemberCol.a
{
color:#E3E3CA;
}
or any other suggestions instead of having to go to each page and wrapping all the links around another class name.
Just do:
.leftMemberCol a
{
color:#E3E3CA;
}
That will select all anchor tags nested within the element with the class of .leftMemberCol
If the color doesn't work, check if you set it earlier on in your CSS file for any of the pseudo selectors of the a tag, i.e. a:link etc.
override them using
.leftMemberCol a:link,
.leftMemberCol a:hover,
.leftMemberCol a:visited,
.leftMemberCol a:active
{
color: #E3E3CA;
}
replace the last dot with a space
.leftMemberCol a {
style goes here
}
The dot indicates a class. A hash indicates an id (
<div id="home">
can be styled with
#home { }
). A regular html element, like a td or a doesn't need a prefix.
.leftMemberCol a
{
color:#E3E3CA;
}
should do the trick.
You are very close. This is how you select the links inside the cell:
.leftMemberCol a
{
color: #E3E3CA;
}
You can read more about selectors here.
Edit:
If the style doesn't take effect, it's probably because you have some other style defined for the links that is more specific. You can make the style more specific by adding specifiers, for example:
td.leftMemberCol a
{
color: #E3E3CA;
}
As a last resort you can also use the !important directive:
.leftMemberCol a
{
color: #E3E3CA !important;
}
.leftMemberCol>a
{
color:#E3E3CA;
}
.leftMemberCol a
{
color:#E3E3CA;
}
This targets all <a> elements that are descendents of .leftMemberCol
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
I have a css class rule:
.test{ text-align:center; font-family:Verdana; }
And i want to create another id rule (I hope It is right calling by "id rule" ):
#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }
I have a lot of div elements. I want to pass .test class properties to other elements with only changing css file. That's why i don't want to add class attribute to div elements. The html code below:
<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>
But i want to add .test class properties to #divNew class by using inheritance and i don't want to add class attribute to the div like as above.
Is there any way to do this?
Just include the ID class on the upper declartion, the last declaration for any property wins. E.g. if the first rule had a color: Green;, .test would be green, #divNew would still be red.
.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }
I believe the question is, can my "#divNew" CSS rule inherit the properties of the existing ".test" rule so that:
[Psuedo Code]
.test { color: red; }
#divNew : .test { border: 1px solid Black }
... results in an element with an id of #divNew getting both red text and a black border.
And the answer is no - there is no syntax for declaring the inheritance of one rule by another rule - but you can apply multiple CSS rules to one element.
In this example, the element would take the rules for "#divNew" and ".test" and ".another". It would override any conflicting properties with the last rule in your CSS.
<div id="#divNew" class="test another">...
LESS/dotLess allow you to perform additional processing within a CSS file on the server side, using a CSS style syntax. LESS. I'd link to dotLess, but I can't find a functioning link at present (http://www.dotlesscss.com/ is coming up empty for me)
edit
Or T4CSS from Phil Haack
What do you mean by inheritance? If in your HTML #divNew is a child of .test, then CSS properties of .test are already inherited by it (unless you override them by setting specific #divNew properties).
Syntax for adding properties directly to #divNew which is also .test:
#divNew.test {/*properties*/}
Syntax for adding properties to #divNew which is a child of .test:
.test #divNew {/*properties*/}
<div id="divNew" class="test">Ta ta taaaaa</div>
Not sure to understand you, but:
.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }