I have an H3 header with the class "calbri", using the following HTML:
<footer>
<div class='wrapper'>
<div class='col'>
<h3 class="calibri">Column Header</h3>
<p>Some text.</p>
</div>
</div>
</footer>
The styles are defined as follows:
footer .col h3 {font-size:20px; font-family: 'HelveticaNeueMediumCond';}
.calibri {font-family:Calibri,Verdana,Arial;}
The ".col h3" style is picked up just fine.
The added ".calibri" class however, is not.
Any help you could offer to explain why would be greatly appreciated.
Thanks,
David
There is a point system in CSS. The selector with more points overrides the other selector. Let's compare 2 selectors
The 1st selector:
footer .col h3{}
The above selector has 2 elements (footer and h3) and 1 class (.col); this results in 12 points.
The 2nd selector:
calibri{}
This has 1 class (.calibri); this results in 10 points.
Conclusion:
Because 12>10 the 1st selector will override the 2nd selector.
If you want the 2nd selector to work, you need to give it more points. One way is to change the class to and id. So class="calibri" becomes id="calibri" which gives the calibri selector 100 points.
Further:
Here's an article for the point system: http://css-tricks.com/specifics-on-css-specificity/
See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity on CSS specificity.
You need to use h3.calibri instead.
Related
I am new to css. Can someone help me in differentiating "#test" and "div#test"?
<html>
<head></head>
<body>
<div>
<span>Some stuff here..</span>
</div>
<div id="test">
<span>This is my data</span>
</div>
</body>
</html>
You really ought not to qualify an ID with a tagname per the MDN, as follows:
Don’t qualify ID rules with tag names or classes
If a rule has an ID
selector as its key selector, don’t add the tag name to the rule.
Since IDs are unique, adding a tag name would slow down the matching
process needlessly
The main difference is the specifity weight changes.
Doing #id is less specific than div#id
This means that your div#id rules are used because it has a higher specifity value
div#id {background: #000}
#id {background: #fff}
The background of the div with that id will be black, even if another rule is selected afterwards
#test will take the element with the id test while div#test will only take the div with an id named test.
This doesn't make a great difference since ids have to be unique.
This kind of info is pretty easy to find, you may want to take a look at W3schools documentation
#id & div#id differs only when applying styles to that element.
Browser calculates the most relevant element by calculating specificity.
specificity calculate rules are in the follwing link
https://www.w3.org/TR/CSS22/cascade.html#specificity
#id will be 0100
and div#id will be 0103
So what does the number means if you write
div#id {
background: green;
}
#id {
background: red;
}
the color of box will be green
reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
The #id is Selects the element with id="firstname". It is one kind of CSS Selectors.
Check all CSS Selectors at https://www.w3schools.com/cssref/css_selectors.asp
There is a minor difference.
When you use div#id it will only apply to #id that are attached to a div. Otherwise the rule is ignored.
Hope it helps. Thanks
When you use div#id it will only apply to #id that is attached to a div.
Specificity of div#id is more than that of #div.
<html>
<style>
div#test {
background: green;
}
inspector-stylesheet:1
#test {
background: red;
}
</style>
<body><div>
<span>Some stuff here..</span>
</div>
<div id="test">
<span>This is my data</span>
</div></body>
<span id="test">This is my data</span>
</html>
Basically id's are unique but to show how the element is specific when used with combination div#id if there are two different elements with test for two different elements then the stronger would be the specified element like div#id
The specificity is different (div#test one is higher) and div#test applies to only a div, not other tags.
div#test specificity is 0101
#test specificity is 0100
Specificity Calculator
As you can see below, div#test is a selector only for divs with the id test. #test will select every element with the id test.
However, since you should never use an id multiple times, this should not be a problem. div#test will just slow down the matching in the DOM so you shouldn't use it.
Just to be clear: if you chain elements and ids, you are more specific. This means, these specifications will always override less specific ones.
div#test{color:green}
#test{color:red}
The color will be green.
If you meant div #test, that's for chaining through the DOM tree.
div#test{ float:right}
#test{color:green}
div #test{margin-left:60px}
<html>
<head></head>
<body>
<div>
<span>Some stuff here..</span>
</div>
<div id="test">
<span>This is my data</span>
</div>
<span id="test">no data</span>
<div>
<span id="test">heres data</span>
</div>
<div>
<p>
<span id="test">heres data aswell</span>
</p>
</div>
</body>
</html>
I am a little bit in doubt of a small thing here. I have made a wireframe, that I started to make. The line: "A catcy piece of text" has to have a background. But how do I make that background, without styling all h2 tags? As I understand it is not good practice to give a h2 tag a class?
HTML
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">COMPANY NAME</h1>
<h2 class="text-center">Change this <b>subline</b> here</h2>
<p class="text-center">
<br>
Get Free Membership
</p>
<h2 class="text-center">A CATCY PEICE OF TEXT</h2>
<p class="text-center"><i>Enter your email for more news</i></p>
</div>
</section>
Using an ID or even a unique class is fine, nothing wrong with it. But to answer your question without referring to the classes, you need to use the hierarchy of your DOM elements. One such way would be:
section > div > p + h2 {...}
The says select the h2 element that is the adjacent sibling of a paragraph that is the child of a div that is the child of a section.
Check out the MDN section on CSS combinators for more info.
I would like to select elements between h1 tags. For example, I would like to apply a style to all p between the h1#bap and the next h1, while not changing the style at any other places.
No other tags should be added (otherwise, it'd be too easy :) ).
Can't use any nth-sibiling as elements between headers can be trillions.
Obviously, I may want to apply style between other headers as well (between specific h2,...).
<h1 id="bap">bap</h1>
<p>foo bap</p>
<p>foo bap 1</p>
<p>foo bap 2</p>
<p>foo bap 3</p>
<p>foo bap 4</p>
<div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
<p>balibom</>p
You can use a lesser know selector formally called the Sibling combinator (well, I think that's it's name anyway!)
Using this syntax, you can select all p elements after <h1 id="bap">bap</h1>:
#bap ~ p { color: red; }
Unfortunately, this selects all paragraph elements after <h1 id="random-bor">random bor</h1>
too, but this can be overcome by resetting the styles of those paragraph elements like such:
#random-bor ~ p { color: black; }
See this fiddle
This works in every modern browser, unfortunately it doesn't work in IE6, if that's an issue then a jQuery solution would probably be best.
h1#bap + p{color:red}
This works for the first p tag. Need to find the way to apply for all the tags. This is what I got for now
I was going to suggest to add some <div>s around each section, until I read the bit where you said no other tags should be added.
You can't do it with css alone, but you could use some JavaScript to implement this algorithm:
Loop through all the elements of the page.
When you see a <h1>, remember it's id.
For every <p>, give it a class that corresponds to the last <h1>'s id.
You should end up with something like this, which you should be able to style easily with css.
<h1 id="bap">bap</h1>
<p class="bap">foo bap</p>
<p class="bap">foo bap 1</p>
<p class="bap">foo bap 2</p>
<p class="bap">foo bap 3</p>
<p class="bap">foo bap 4</p>
<div>defoo bap</div>
<h1 id="random-bor">random bor</h1>
<p class="random-bor">balibom</>p
Then you can style things like this:
p.bap {}
p.random-bor {}
Can only be done with javascript, if you're using jquery it would look like
$('h1#bap').nextUntil("h1#random-bor",'p').css('background','red');
Edit:
How to select all content between two tags in jQuery
this explains exactly what you would like to have done
Edit2:
there is also a jquery function
http://api.jquery.com/nextUntil/
this more a conceptual question. Recently i found myself to be more confident with this kind of html (example)
<div id="mainCont">
<div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div>
<div id="mainContSecond">Other Text</div>
</div>
Having all important tag marked with an ID you can easly write down css:
#mainContFirst {} etc
is this a bad pratice? Should I use just css selector? Is this faster then use selector?
Thanks
Grouping (edit)
Ok now What about elements that should have the same style?
let's say for example in every divs the second <span> should have font-size:10px; it's better this:
<div>
text text <span></span> <span id="firstDivSpan"></span>
</div>
<div>
text text <span></span> <span id="secondDivSpan"></span>
</div>
and then the css:
#firstDivSpan, #secondDivSpan {...}
Or like this?
<div>
text text <span></span> <span id="firstDivSpan" class="commonStyle"></span>
</div>
<div>
text text <span></span> <span id="secondDivSpan" class="commonStyle"></span>
</div>
.commonStyle{...}
What's better?
ID selectors are the fastest. That is not bad practice at all; you're simply operating under the assumption that there will only be one element with that ID on your pages.
That said you shouldn't abuse IDs for lame reasons like rendering performance. Use IDs to mark truly unique elements, not to mark everything so you can forget about stuff like descendant combinators, classes, groups etc. Those other selectors are what make CSS so powerful, not just the ID selectors.
Re question edit: there isn't any better one in this case. Performance issues aside (because they don't matter at all) it largely depends on the meaning of the selectors.
If your styles apply to any element with the .commonStyle class then use the class selector. If you only want to target those two specific spans regardless of the class then the ID selectors are more appropriate.
It is better to use the ID like in your example.
It is easier for the browser to fetch a particular ID element rather than have to find all parents, then descendants...
As someone expanded on my answer in a separate thread, article regarding this: http://www.css-101.org/descendant-selector/go_fetch_yourself.php
ID, class, element name - they are all CSS selectors.
I'm new to html and web coding in general. What do the periods before variables indicate in the following code?
<style>
<!-- Modify these styles -->
.page_title {font-weight:bold}
.page_text {color:#000000}
</style>
... JS code
Thanks
those are not variables.
Those are CSS Selectors, and they represent a HTML node with that class per example
<div class="page_title">Page Title</div>
You use CSS Selectors to style those elements in the HTML
Since they've suggested. =)
There are a few ways to reference HTML nodes in CSS, the most common are ID's, Classes and the tag name.
take a look at this example
<div>
<ul id="first_set">
<li class="item"> Item 1 </li>
<li class="item"> Item 2 </li>
</ul>
<ul id="second_Set">
<li class="item"> Item 1 </li>
<li class="item"> Item 2 </li>
</ul>
</div>
Ok. we have a div with two unordered lists, each list as two list-items, now the CSS:
div { background-color: #f00; }
#first_set { font-weight: bold; }
#second_set { font-weight: lighter; }
.item { color: #FF00DA }
the div selector will select all <div> 's in the HTML page,
the # means ID, so #first_set it will select the object with that id in this case it will select
<ul id="first_set">
the dot symbol select classes so the .item selector will select all objects with the item class in this case it will select all
<li class="item">
This is just the basics really, you can mix these selectors to be more specific per example:
#first_set .item { text-decoration: underline; }
and it will only select the objects with class item that are inside the #first_set.
It's worth mentioning that in general, an ID (selected with #myID) should only be used ONCE on an HTML page, and a class can be used on multiple elements. Additionally, an element can have more than one class; just separate them with spaces. (e.g., <li class="item special-item">) – Platinum Azure
That is to mark a style grouping as a class in CSS.
Please go through the tutorial #w3schools, that is a real good starter.
http://www.w3schools.com/css/default.asp
usually the class something belongs to for example
.treeListContainer input
treelistcontainer is the class and input is the control within the class so the style only affects the controls within that class
The section you talk about is CSS embedded in HTML. Neither CSS nor HTML have variables, you are looking at selectors.
The dot prefix indicates that it is a class selector and will match an HTML element which is a member of the given class.
To make an element a member of a class, the class name is added to the space separated list given as the value of the class attribute.
Thus .page_title will match an element with:
class="foo page_title bar baz"
Generally speaking, however, anything you give a class name such as "page_title" to is likely to be the same thing as the main heading, so the HTML should usually look like:
<h1>Main heading goes here</h1>
And the CSS:
h1 { … }
Incidentally, <!-- Modify these styles -->, is an error in HTML (and HTML compatible XHTML). A CSS comment is delimited with /* and */.