In CSS, I want something like:
:root{
underline-all-h1-tags:true
}
/* it's not all h1 tags, it's actually h1-tags-with-a-bunch-of-other-things".
But for KISS reasons, we'll assume it's just all of them.*/
/* ... lots and lots of other stuff...*/
h1{
if(underline-all-h1-tags == true){
text-decoration: underline
} else {
text-decoration:none
}
}
Is there a way to do this? I know I could just do
:root{h1-underline:underline}
h1{text-decoration:var(h1-underline)}
But I am trying to make my code readable to me-in-10-years-when-I-have-totally-forgotten-how-to-CSS.
why not make use of the cascading part of cascading style sheet?
h1{
text-decoration:none;
}
.underline h1{
text-decoration:underline;
}
Applying the class "underline" to any parent element would do the same thing that it looks like you're trying to describe above.
You could add or remove the underline class with js, or set it statically on elements you want affected.
As an alternative to Kai's answer:
h1 { text-decoration: none; }
.underline { text-decoration: underline; }
.underline is a utility class that can be used to add an underline to any element you want, including an h1. This becomes extremely scalable.
Of course I personally wouldn't name it .underline; I would probably name it something like
.u-td_u (which stands for "utility, text-decoration, underline"). The naming is your choice.
And just for kicks you could also have the other utilities available:
.u-td_n { text-decoration: none; }
.u-td_i { text-decoration: inherit; }
.u-td_o { text-decoration: overline; }
.u-td_l { text-decoration: line-through; }
/* etc ... */
Related
I had to covert some PSD-s into html, but every page had its own styling so I went forward and made one for each.
The client now requires them to be joined into a single one. Is that possible?
Thanks.
Edit: They don't have unique ID/classes.
Since you converted the PSD's to HTML, I assume you've still got access to the code? In which case, your best best is to give each page a unique identifier (class or ID) at a high enough level that you can specificy with parent / child selectors. Example:
Page 1:
<body id="aboutus">
Page 2:
<body id="services">
You can then target via CSS the elements that are on each page within the same CSS file (the laws of specificity will take effect: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/):
#aboutus h1 {
color: red;
}
#services h1 {
color: green;
}
Option 2 (Credit to Darren Sweeney):
In addition to adding an id / class to the body element I've mentioned above, you can make the process of adding styles for each page a lot easier by using a CSS preprocessing language such as SASS / SCSS. For example:
SCSS:
#aboutus {
h1 {
color: red;
}
p {
font-size: 10px;
}
a {
text-decoration: underline;
.active {
color: #fff;
}
}
}
#services {
h1 {
color: green;
}
p {
font-size: 15px;
}
a {
text-decoration: underline;
.active {
color: #000;
}
}
}
In my Page the following CSS is set:
a:link {
color: #0094DE;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0094DE;
}
a:hover {
text-decoration: underline;
color: #DD127B;
}
I want to Change the Link color inside a div which has a class assigned to it.
I tried the following :
register:link{color:#FFFFFF;
}
Where register is the name of the div in which i want to change the link color.
How can i do that?
Also how to change the color for hover link over the same div?
.register a:link{
color:#FFFFFF;
}
It can be something like this:
a.register:link { color:#FFF; text-decoration:none; font-weight:normal; }
a.register:visited { color: #FFF; text-decoration:none; font-weight:normal; }
a.register:hover { color: #FFF; text-decoration:underline; font-weight:normal; }
a.register:active { color: #FFF; text-decoration:none; font-weight:normal; }
how about something like this ...
a.register:link{
color:#FFFFFF;
}
I think there is a confusion about what the OP is actually asking.
This solution:
a.register:link {color:#FFF}
...changes the color of a link whose class is "register". But that's not what the OP was asking.
And this solution:
.register a:link {color:#FFFFFF;}
...changes the color of a link that itself has no class but is placed inside of a div with class "register". And that's what the OP was asking.
Both of these answers are being upvoted here but only the second one is correct answer to the original question.
#register a:link
{
color:#fffff;
}
If you want to add CSS on a:hover to not all the tag, but the some of the tag, best way to do that is by using class. Give the class to all the tags which you want to give style - see the example below.
<style>
a.change_hover_color:hover {
color: white !important;
}
</style>
<a class="change_hover_color">FACEBOOK</a>
<a class="change_hover_color">GOOGLE</a>
I think you want to put a, in front of a:link (a, a:link) in your CSS file. The only way I could get rid of that awful default blue link color. I'm not sure if this was necessary for earlier version of the browsers we have, because it's supposed to work without a
smaller-size version:
#register a:link {color: #fff}
Without grouping we could do:
.footer_content a:link {
color: #FFFFFF;
}
.footer_content a:visited {
color: #FFFFFF;
}
With grouping:
.footer_content a:link, .footer_content a:visited {
color: #FFFFFF;
}
is there a way to define the css selector to get rid of the extra .footer_content declaration that does the same thing? Something that would looking a bit like this:
.footer_content (a:link, a:visited) {
color: #FFFFFF;
}
There currently is not a universally supported way of achieving that.
However, the experimental :any() selector would make that possible, if it gets implemented and standardised. It is not supported in any browser but the latest Firefox nightlies yet.
You can achieve something kinda similar with Sass, which "compiles down" to CSS.
In Sass you would use nesting, like so:
.footer_content {
a:link, a:visited {
color: #FFFFFF;
}
}
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important"..
So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
Link with reset
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}