I have a little css code to add an underline to the H2 headings in my blog posts:
.post h2:after {
content:'';
display:block;
border: .5px dashed ;
}
This works.
For a specific post, I don't want this underlines applied. I added an additional class to the H2 headings that I want to stylize differently: .h2lines
Now, I can exclude this new class (.h2lines) when applying CSS directly to .post h2. For example:
.post h2:not(.h2line) {
color: #blue;}
This works. It will make all post H2 blue except the ones with additional class.
However, I can't get it to work on the :after element:
.post h2::after:not(.h2line)
This does not work. It removes the underline from all H2 headings.
Any help is very much appreciated.
You just use,
.post h2:not(.h2line)::after{}
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
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;
}
Even though I have set text-decoration to none, an underline is still showing on the h1 element. If you want to see the full css, go here. I am new to css, and this is just an adapted version of some code I found on the internet, sorry if the problem is obvious. If the problem isn't with the bellow code (which is where I think it probably is) then I will add in other relevant code.
You can see the page this is working on here
#pagetop h1 , a:visited
{
display:block;
float:left;
line-height:90px;
color:#FFFFFF;
text-align:left;
font-size:27px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:23px;
text-decoration:none;
}
There is text decoration in your link in the h1 tag.
Add this style:
h1 a
{
text-decoration:none;
}
Your CSS selector #pagetop h1 , a:visited states that you would like to apply those styles to an h1 and also an a in its visited state.
The comma in your code represents a list of separate selectors rather than a combined selector. In your case you don't need to separately specify the same styles for both the h1 and the a.
What you want to select is an a that is a descendant of an h1 within #pagetop (so that it isn't applied to all h1s):
#pagetop h1 a { text-decoration: none; }
I'm pretty new to using CSS beyond applying directly to each element. I'd like to know how I should be doing this. (simplified from my actual implementation, but relatively the same). Is it possible to inherit styles somehow?
I have 3 div classes defined, each positioning a div in my page. I've left out the css for these, but the style divide my page into 3 sections.
div.left{}
div.center{}
div.right{}
Now, when a user selects one of the divs, it's then highlighted, so I have css to highlight it.
div.lefthighlighted{}
div.centerhighlighted{}
div.righthighlighted{}
I have to now repeat all the styles from div.left{} to div.lefthighlighted{} and add the styles to highlight, and this has to be done for all three div styles I've defined.
OK, I also have a tags within all three of these divs that I want styled different from all other a tags in my application, but they will be the same for the highlightd divs. This is were things get crazy.
I end up with the following for left, center and right. The worst part of this is that all the a tag styling is the same for left, lefthighlighted, center, centerhighlighted, right and righthighlighted, but I can't figure out how to share all of this.
div.left a:link {}
div.left a:visited {}
div.left a:active {}
div.left a:hover {}
div.lefthighlighted a:link{}
div.lefthighlighted a:visited {}
div.lefthighlighted a:active {}
div.lefthighlighted a:hover {}
Keep in mind, I'm simply putting empty braces here, but in my stylesheet, I've got a bunch of styles defined. Is there a way to say
div.left a:link {
inherit div.right a:link;
or
use div.right a:link;
}
I'm finding myself copying and pasting all the same styles and only changing the class name or the parent class name.
Give the elements multiple classes.
<div class="left highlighted">
And then just include the changed properties in the div.highlighted rule-set.
You can group styles by using the , (commas) as a separator. Eg:
div.left a:link, div.right a:link {}
/*Newlines don't matter:*/
div.left a:link,
div.right a:link {}
Note that the following does not work as "expected":
/*Expecting to select all links under div.left or div.right*/
div.left, div.right a:link {/*FAIL*/}
Another note about inheritance. Elements inherit styles from their parents. When a new matching selector is encountered, the styles from the parent still apply, unless defined otherwise:
a:link, a:visited, a:active {
color: red;
font-size: 16px;
}
a:hover{
font-size: 20px; /*font-size changed, while the color is still red.*/
}
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