I have found similar questions to mine but none of the suggestions seems to apply to my situation, so here goes...
I have a webpage with a buch of images on them. Each image has a title which in markup is between h2 tags. The title is a link, so the resulting markup is like this:
<ul class="imagelist">
<li>
<h2>Title 1</h2>
<img src="" />
</li>
<li>
Image 2, etc...
</li>
</ul>
All I want is for the title links to not be underlined. I tried to address this like this:
.imagelist li a h2 { color:#333; text-decoration:none; }
It completely ignores the text-decoration rule, yet respects the color rule. From other questions I learned that this could be because a child element cannot overrule the text-decoration of any of its parents. So, I went looking for the parent elements to see if any explicit text-decoration rules are applied. I found none.
This is driving me crazy, any help?
For the sake of completeness, here is the Firebug CSS output, which shows the full inheritance and such. Probably more than you want, but I cannot see anything conflicting here.
.imagelist li a h2 {
color:#333333;
text-decoration:none;
}
main.css (line 417)
h2 {
font-size:14px;
}
main.css (line 40)
h1, h2, h3, h4, h5, h6 {
display:block;
font-weight:bold;
margin-bottom:10px;
}
main.css (line 38)
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
reset-min.css (line 7)
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
reset-min.css (line 7)
Inherited froma /apps/ju...mage/745
a {
color:#0063E2;
}
main.css (line 55)
Inherited fromli
.imagelist li {
list-style-type:none;
}
main.css (line 411)
li {
list-style:none outside none;
}
reset-min.css (line 7)
Inherited fromul.imagelist
.imagelist {
border-collapse:collapse;
font-size:9px;
}
main.css (line 410)
Inherited frombody
body, form {
color:#333333;
font:12px arial,helvetica,clean,sans-serif;
}
main.css (line 36)
Inherited fromhtml
html {
color:#000000;
Try this:
.imagelist li a, .imagelist li a:hover{color:#333; text-decoration:none;}
Try switching your html about a little, while HTML 5 allows block level elements to be within a tags, I'm not sure that HTML 4.01 or xhtml does, so it might be worth:
...
<li><h2>title 1</h2></li>
...
And using the css:
a:link,
a:visited {text-decoration: none; }
Or, in case of specificity being the problem:
ul.imagelist li h2 a:link,
ul.imagelist li h2 a:visited {text-decoration: none; }
Related
Hello I'm just starting with css and I see people in videos and such already have css code written before they write a single line of code like:
body {
padding:0;
margin:0;
}
this is like a really simple example they write like body,div,table..etc like the a:active and stuff like that but like in like really long code they even add a selected attribute so when you selected any words on the page the background and color changes I know this depends from one developer or another but is there a really basic piece of code that I can start with?
People prefer different ways of working with CSS, there is no right or wrong way. But there is certainly ways to get a good head start with your browser resets.
There are a few ways to play it, you can either use a reset or normalise your code to fit the different browsers.
A reset will make everything behave in streamlined way across each browser, whereas normalising your css will make browsers render all elements more consistently and in line with modern standards.
Rememeber there is no right or wrong way to approach this.
Eric Meyes CSS Reset
Normalize.css
it is all just style and opinion, but this is often used and resets just about everything (so you'd have to create all your styles yourself, instead of using browser defaults).
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
I am trying to style all the headings in my header with a different font-family than the headings on the rest of the page but I am having trouble getting the style to only apply to the specific header ID.
Here is what I tried:
#header h1,h2,h3,h4 {
font-family:'Helvetica';
}
But this causes all h1/2/3/4 tags to use the Helvetica font regardless of if they are in the header div or not. I'm sure I am missing something simple, can anyone help? Thanks!
I think you must do so:
#header h1,#header h2, #header h3, #header h4 {
font-family:'Helvetica';
}
You need to target all hN with the ID.
#header h1,
#header h2,
#header h3,
#header h4 {
font-family:'Helvetica';
}
See Fiddle
I have checked and checked and I'm sure it's something simple I've overlooked but my font is not displaying.
The first paragraph is suppose to have quotes around it (you will see it has them right now because I did it without font-awesome); however, you will see the second full paragraph is suppose to have a quote at the beginning and it's not displaying. Please help
http://dev.healthcaresolutionsteam.com/agent/barbara-scott/
Your CSS specificity is being overridden by a style in style.css.
Font-Awesome only has:
.fa { font-family: FontAwesome }
Yet your style overrides the font-family (note the !important):
#fake, .menu, a.signin span, .balloon_text, #footer, #footer a, #signin_menu p a, #learning_center h2, #hst_blog h2, #carriers h2, #career_center h2, #learning_center, #hst_blog, #carrier_careers, .entry-title, #sidebar, #sidebar a, .breadcrumbs a, .breadcrumbs, #searchform input, .page-title, .entry-content, .entry-content a, .entry-utility, .read_more, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, .widget-title, #live_chat a, #hst_careers, #apply_online, #sales_revenue, #hst_compensation, #search_agents, #search_map, .agent_search, #search-results, #usca-intro-text, .usca-plan, #usca-form {
font-family: 'AllerRegular',Arial,Helvetica,sans-serif !important;
font-weight: normal;
}
Desired style being overridden:
Style actually being applied:
Check, if you use selector *
*{font-family: Arial}
in your default stylesheet.
I'd like to target all h tags on a page. I know you can do it this way...
h1,
h2,
h3,
h4,
h5,
h6 {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
but is there a more efficient way of doing this using advanced CSS selectors? e.g something like:
[att^=h] {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
(but obviously this doesn't work)
No, a comma-separated list is what you want in this case.
If you're using SASS you could also use this mixin:
#mixin headings {
h1, h2, h3,
h4, h5, h6 {
#content;
}
}
Use it like so:
#include headings {
font: 32px/42px trajan-pro-1, trajan-pro-2;
}
Edit: My personal favourite way of doing this by optionally extending a placeholder selector on each of the heading elements.
h1, h2, h3,
h4, h5, h6 {
#extend %headings !optional;
}
Then I can target all headings like I would target any single class, for example:
.element > %headings {
color: red;
}
It's not basic css, but if you're using LESS (http://lesscss.org), you can do this using recursion:
.hClass (#index) when (#index > 0) {
h#{index} {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
.hClass(#index - 1);
}
.hClass(6);
Sass (http://sass-lang.com) will allow you to manage this, but won't allow recursion; they have #for syntax for these instances:
#for $index from 1 through 6 {
h#{$index}{
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
}
If you're not using a dynamic language that compiles to CSS like LESS or Sass, you should definitely check out one of these options. They can really simplify and make more dynamic your CSS development.
The new :is() CSS pseudo-class can do it in one selector.
For example, here's how you could target all headings inside a container element:
.container :is(h1, h2, h3, h4, h5, h6)
{
color: red;
}
Most browsers now support :is(), but keep in mind that most browsers made before 2020 didn't support it without a prefix, so be careful about using this if you need to support older browsers.
In some cases, you may instead want to use the :where() pseudo-class, which is very similar to :is() but has different specificity rules.
SCSS+Compass makes this a snap, since we're talking about pre-processors.
#{headings(1,5)} {
//definitions
}
You can learn about all the Compass helper selectors here:
Here is my attempt to solve this problem with (modern) CSS only.
Context : Inside of Joplin (very nice note taking app, link), there is an userfile.css in which you can write your custom CSS for display and export of markdown notes.
I wanted to target all headings directly after (adjacent sibling) certain tags, namely p, ul, ol and nav to add a margin in between. Thus :
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6 {
margin-top: 2em;
}
WOW. Very long. Such selectors.
I then came here, learnt, and tried :
p + :is(h1, h2, h3, h4, h5, h6),
ul + :is(h1, h2, h3, h4, h5, h6),
ol + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}
Hmm. Much shorter. Nice.
And then, it struck me :
:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}
Yay, this also works! How amazoomble!
This might also work with :where() or other CSS combinators like ~ or even (space) to create "matrix" of CSS selectors instead of very long lists.
Credits : all the answers on this page referencing the :is() selector.
Stylus's selector interpolation
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
The jQuery selector for all h tags (h1, h2 etc) is " :header ". For example, if you wanted to make all h tags red in color with jQuery, use:
$(':header').css("color","red")
July 2022 update
The future came and the :is selector is what you're looking for as described in this answer given in 2020 by #silverwind (now the selected answer).
Original answer
To tackle this with vanilla CSS look for patterns in the ancestors of the h1..h6 elements:
<section class="row">
<header>
<h1>AMD RX Series</h1>
<small>These come in different brands and types</small>
</header>
</header>
<div class="row">
<h3>Sapphire RX460 OC 2/4GB</h3>
<small>Available in 2GB and 4GB models</small>
</div>
If you can spot patterns you may be able to write a selector which targets what you want. Given the above example all h1..h6 elements may be targeted by combining the :first-child and :not pseudo-classes from CSS3, available in all modern browsers, like so:
.row :first-child:not(header) { /* ... */ }
In the future advanced pseudo-class selectors like :has(), and subsequent-sibling combinators (~), will provide even more control as Web standards continue to evolve over time.
Plain CSS
With plain css you have two ways. This targets all the heading elements wherever they are inside the page (as asked).
:is(h1, h2, h3, h4, h5, h6) {}
This one does the same but keeps the specificity to 0.
:where(h1, h2, h3, h4, h5, h6) {}
With PostCSS
You can also use PostCSS and the custom selectors plugin
#custom-selector :--headings h1, h2, h3, h4, h5, h6;
:--headings {
margin-top: 0;
}
Output:
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
You could .class all the headings in Your document if You would like to target them with a single selector, as follows,
<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>
and in the css
.heading{
color: #Dad;
background-color: #DadDad;
}
I am not saying this is always best practice, but it can be useful, and for targeting syntax, easier in many ways,
so if You give all h1 through h6 the same .heading class in the html, then You can modify them for any html docs that utilize that css sheet.
upside, more global control versus "section div article h1, etc{}",
downside, instead of calling all the selectors in on place in the css, You will have much more typing in the html, yet I find that having a class in the html to target all headings can be beneficial, just be careful of precedence in the css, because conflicts could arise from
Using scss you can loop through 6 and append to an empty variable $headings using a comma separator
$headings: ();
#for $index from 1 through 6 {
$headings: list.append($headings, h#{$index}, $separator: comma);
}
#{$headings} {
--default: var(--dark);
color: var(--default);
}
Thanks #steve
Why is my text being cut off in IE7 and Firefox from left side ? it looks OK only if i add padding-left:1px? why it's happening? I' can't give live link of site.
see problem in this screen-shot alt text http://easycaptures.com/fs/uploaded/458/3132736693.png
letter "W" being cut off from left side.
CSS code
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, font, img, ins, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td
{
border:0 none;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;}
body {font-family:Arial,Helvetica,sans-serif;
font-size:62.5%;
line-height:1.2;}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;}
.home-boxesContainer ul {
font-size:0.9em;
margin:auto;
overflow:hidden;
width:90%;}
.home-boxesContainer ul li {
background:transparent url(Images/dot-grey.gif) repeat-x scroll left bottom;
float:left;
line-height:16px;
margin:10px 0 0;
overflow:hidden;
padding-bottom:5px;
padding-right:10px;}
.home-boxesContainer ul li a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(Images/arrow-green.gif) no-repeat scroll right center;
color:#6CB025;
padding-right:20px;
text-decoration:none
}
This is an issue with certain fonts on windows, specifically Verdana, from my experience. I spent about three days looking for float bugs and such to solve this, three years ago. It occurs mainly with the capital 'w' character, but can also be a problem with 'v' too, and only with cleartype disabled.
The best solution is to use text-indent:1px; on your paragraphs, if you feel you need to implement a fix.
I can't see well on your screenshot, but I think its the font issue, try with different font.
I suspect there can be three reasons:
The container of your menu is pushed there to left making text that way
It may be font issue too (this happens sometimes due to fonts)
Try adding line-height to your list.