Suppose to have this html:
<span>DOG</span>
I need to increase size of string "DOG"
So I use this css:
.hoverelement span:hover {
font-size:20px;
}
But this does not work? Can anyone help me?
You need to add !important in span's css, because it may be inherited by it's parent's rule.
.hoverelement span:hover {
font-size:20px !important;
}
<span>DOG</span>
Try to give the a-element the hover-selector.
a.hoverelement:hover span {
font-size: 20px;
}
Use this instead:
.hoverelement:hover span {
font-size: 20px;
}
Related
I am trying to edit a theme with the additional CSS options instead of hardcoding things in, but it is proving very difficult.
This page has a link on the bottom that is black and I am trying to make it white.
<figure class="wp-block-image linktest">
<img src="link" alt="" class="wp-image-119782" srcset="link" sizes="(max-width: 1024px) 100vw, 1024px">
<figcaption>Partners under Superrymdåret 2019
</figcaption></figure>
I tried adding the following CSS.
.linktest a:link {
color:white;
}
and
figcaption .linktest a:link {
color:white;
}
Even just a:link, but it doesn't catch on. Am I missing something?
figcaption is a child of .linktest so your CSS is the wrong way around. The below should do the trick.
.linktest a {
color: #fff;
}
Kindly add without the link:
.linktest a{
color:white;
}
change
figcaption .linktest a:link {
color:white;
}
to
figcaption a:link {
color:white;
}
a doesn't have parent with linktest class.
Hope this helps. thanks
.linktest figcaption a{color:#fff}
try using above code hope it helps
Just try to use
.linktest a {
color: white;
}
instead of
.linktest a:link {
color:white;
}
As the title says I have a p element and I want to text-indent the start of every paragraph apart the the first paragraph where I don't want any text-indent. How can I do this in css?
You can give your first paragraph a class and then can do the following:
p:not(.first){
text-indent:30px
}
Please refer to this link:https://jsfiddle.net/n5pjgev6/400/
Another option which wouldn't require adding any additional markup or classes to your page:
http://codepen.io/panchroma/pen/jyaOJL
p{
text-indent:20px;
}
body p:first-child{
text-indent:0;
}
Good luck!
You can do this simply by applying a text-indent property to your paragraphs as so:
p {
text-indent: 50px;
}
The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.
Excerpt from CSS Tricks.
DEMO
p{
text-indent:40px
}
p:first-child{
text-indent:0;
}
CSS
p > span {
margin: 5px;
display: inline-block;
}
p > span:first-child {
text-indent: 25px;
}
JSFIDDLE
you can use this:
p:not(:first-child) {
text-indent:30px;
}
I have an H1 inside an article element.
My h1 is styled something like this:
h1 {
&:extend(.display1);
border-bottom:solid 0.1rem #divider;
color:#primaryText;
margin-bottom:2.4rem;
padding-bottom:0.7rem;
}
However, I only want to apply this styling when the H1 isn't inside an article. I thought it would be a simple addition to the CSS like this:
*:not(article) h1 {
}
However, this doesn't seem to work for me and I've been left scratching my head. Is it possible? Have I got the syntax right? Is there something else lurking in the CSS?
Any help appreciated.
Yes, you can use this:
h1 {
color:blue;
margin-bottom:2.4rem;
padding-bottom:0.7rem;
}
:not(article) > h1{
color: green
}
http://codepen.io/anon/pen/zvKKqE?editors=110
Have you tried the 'old fashioned way'?
.article h1{ /* insert styling for h1 inside article */ }
h1 { /* insert styling for h1 outside article */}
Please note that .article h1 takes all elements from h1. So make sure you override the different styles (e.g. with !important).
--EDIT--
If you want to use :not() I can't see something wrong with your lines of code.
How does the HTML looks like? I got this example in JSFiddle:
https://jsfiddle.net/2aruu0Lr/1/
It doesn't work if there is no parent tag for h1, it does if there is one like a <span> or in my case a <strong>
Hope this helps you!
Solution:
body *:not(article) h1
Does this the trick for you?
#primaryText: #000000;
#divider: lime;
.display1 {
padding: 15px;
}
h1 {
&:extend(.display1);
:not(article) > & {
border-bottom:solid 0.1rem #divider;
color:#primaryText;
margin-bottom:2.4rem;
padding-bottom:0.7rem;
}
}
Output:
.display1,
h1 {
padding: 15px;
}
:not(article) > h1 {
border-bottom: solid 0.1rem lime;
color: #000000;
margin-bottom: 2.4rem;
padding-bottom: 0.7rem;
}
I have a ccs sheet with the usual tags
a. {}
a.hover {}
I also have a div=id "footer" that I want to change the font style but the global a. and a.hover are overriding it even when I add a
#footer{
color: #333333
}
Can I override using this or do I need to try? a.#footer or a.hover:#footer
Basically the #footer as is wont work because of the a. mentioned above even though the other elements are working in the #footer div such as margin...just the font color and hover??
Can someone tell me how to style this and not let the global a. interfere with it?
Many thanks
It's all about the hierarchy of code:
HTML:
<div>
Sample link
<div id="footer">
Footer link
</div>
</div>
CSS:
a {
color: #ebebeb;
}
a:hover {
color: #000;
}
#footer a {
color: #3e3e3e;
}
#footer a:hover {
color: #609;
}
Try this piece of code
#footer a,
#footer a:hover{
color:#333;
}
what is dot after a ?
the correct form is a {} , a:hover {} , a#footer and a:hover #footer
If you are nesting a inside div element you need to use
#footer a {
color: #333333;
}
If you only use #footer {} it will apply the styles to div and a won't inherit the color, so you can also write
#footer {
color: #f00;
}
#footer a {
color: inherit;
}
This is a matter of specificity. Styling the <a> elements directly is more specific then just applying some CSS to the <div id="footer"> element and all of its children. You can target any links within your footer by using
#footer a {
color: #333;
}
Due to the descendant selector this rule itself is more specific than the one you're using for all the other <a> elements outside of the footer.
Is there some CSS that I can use to set the link color to be the same value as normal text?
Simply set
a { color: inherit; }
edit: you may need to add
a { color: inherit !important; }
but best practices suggest you avoid using the !important over-ride.
Just a small addition:
a{
color: inherit;
}
a:visited{
color:inherit;
}
a:hover{
color:inherit;
}