I came across these on the new job I just started. I don't have web experience so my knowledge is pretty basic. I'm not sure what the below do. I've never come across or used syntax like this before. I was able to find that the #TAFeedback will apply to any element with that id, but that's all I could dig up.
.howmanyinstate .ctrlHolder ol
{
width:90%;
float:right;
}
#TAFeedBack div.ctrlHolder table
{
background:none !important;
}
.howmanyinstate .ctrlHolder ol
applies the style to all ordered lists ol in an element that has a class ctrlHolder and that element is a child of an element with class howmanyinstate
For example:
<div class="howmanyinstate">
<div class="ctrlHolder">
<ol>
...
</ol>
</div>
</div>
A CSS rule identifies the element to which it applies by using a selector.
Here is a writeup on CSS Selectors
The following is a descendant selector: #TAFeedBack div.ctrlHolder table indicates that it applies to a table that is contained in a div that has the attribute class="ctrlHolder" which is contained inside an element that has id="TAFeedBack".
.howmanyinstate .ctrlHolder ol
applies to any ol element within any element with a class of ctrlHolder which is in itself inside any element with a class of howmanyinstate
I'm not sure if you already know this, but this is known as a "css selector". Perhaps something you might want to read up on.
Related
Here is the official documentation for the CSS3 :not() pseudo-class:
http://www.w3.org/TR/css3-selectors/#negation
and the proposed CSS Selectors Level 4 enhancement:
http://dev.w3.org/csswg/selectors4/#negation
I've been searching the implementation and browser support for :not(), but the only examples I found were with a single element or with a direct child of an element, e.g.:
div *:not(p) { color: red; }
The example above works when <p> is a direct child of <div>, but it does not work when <p> is a more distant descendant of <div>.
div :not(p) {
color: red;
}
<div>
<ul>
<li>This is red</li>
</ul>
<p>This is NOT</p>
<blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>
If the answer is in the official documentation above, then I didn't find/understand it. As I said, I have searched this site and the web but couldn't find any discussion about the support or lack thereof of :not() as grand-children of another element.
Is this supposed to work like I think it should?
Is this supposed to work like I think it should?
No, the behavior you're seeing is correct.
In your last example, although the <blockquote> contains a <p>, it's the <blockquote> itself that's matching *:not(p), as well as the condition that it must be a descendant of the <div>, which it is. The style is applied only to the <blockquote>, but it is then inherited by the <p> inside it.
The <p> element itself still counts against the negation, so the <p> itself is still being excluded from your selector. It's just inheriting the text color from its parent, the <blockquote> element.
Even if none of its relatively close ancestors matched the selector, you have elements like html and body to worry about as well — although you could probably just tack on a body selector in the very beginning:
body div...
This is why I often strongly advise against using the :not() selector for filtering descendants, especially when not qualified with a type selector (like div in your example). It doesn't work the way most people expect it to, and the use of inherited properties like color only serves to compound the problem, on top of making it even more confusing for authors. See my answers to these other questions for more examples:
Why doesn't this CSS :not() declaration filter down?
CSS negation pseudo-class :not() for parent/ancestor elements
The solution to the problem described is to simply apply a different color to <p> elements. You won't be able to simply exclude them with a selector because of inheritance:
/* Apply to div and let all its descendants inherit */
div {
color: red;
}
/* Remove it from div p */
div p {
color: black;
}
On Selectors Level 4: yes, :not() has indeed been enhanced to accept full complex selectors that contain combinators. Essentially, this means (once browsers begin implementing it) you will be able to write the following selector and have it do exactly what you want:
p:not(div p) {
color: red;
}
In case anyone is interested, this works in jQuery today.
The color is assigned to the blockquote, and is then inherited by the p.
:not(p) just makes it so that the styles are not directly applied. They are still inherited though.
I was looking at the CSS for a CSS Menu Maker design, and it uses a syntax I haven't seen before.
#cssmenu > ul > li.has-sub.active > a span {
background: url(images/icon_minus.png) 98% center no-repeat;
}
The li.has-sub.active part - is that saying 'a li that has the classes has-sub and active'?
I also haven't seen an instance before of combining the syntax for 'child of' with the syntax for 'has this class'. Is that good practice?
When you have a selector that includes several . (class) indicators, then that means the element must have all listed classes
li.has-sub.active is saying that it selects <li> elements which also must have the class "has-sub" and "active".
As for "Is this good practice?", in my opinion it is. All it does is allow for the ability to be more restrictive with the style selection. This can save time and also is a good way to provide a hook for other types of dom selection in JavaScript.
MDN
CSS Selectors
For more information on CSS Selectors, the Mozilla Developer Network has very good information here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors .
CSS Specificity
In addition, different selectors have different weights. This can cause certain selectors to take precedence, and properly planning for that means taking "Specificity" into account which is also at play here in your example. The MDN has a good article on that subject as well: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity .
Two selectors together with no space inbetween them are selecting the same element. It is a normal use of CSS, not bad practice at all.
According to MDN:
You can also combine selectors, making a more specific selector.
For example, the selector .key selects all elements that have the class name key. The selector p.key selects only <p> elements that have the class name key.
You are not restricted to the two special attributes, class and id. You can specify other attributes by using square brackets. For example, the selector [type='button'] selects all elements that have a type attribute with the value button.
For example:
div.classname{}
Will select <div class="classname"></div>
span#elementid.classname
Will select <span id="elementid" class="classname"></span>
.classname.classtwo
Will select <span class="classname classtwo"></span>
In your CSS, the selectors:
#cssmenu > ul > li.has-sub.active > a span
Would select a HTML structure like:
<div id="cssmenu">
<ul>
<li class="has-sub active"><a><span>I am selected</span></a></li>
</ul>
</div>
And here is a nice little demo
That's the right way, as you may need to add multiple classes for a single element and have different styles inherited. You can think of Multiple Inheritance as a crazy comparison.
#cssmenu > ul > li.has-sub.active > a span {
}
Then it selects:
#cssmenu - ID
ul - directly inside the above element (because of >).
li - directly inside the above element (because of >).
.has-sub.active - LI with both the classes.
This is absolutely the right way to write CSS. Because, this will be something aligned with Modular CSS and you can mix and match different CSS component styles.
Basically I have a dynamically created page like below:
<div id="content>
DYNAMIC HERE
</div>
I have no control of what is in the div, but I know there will be a lot of tables that may be contained within other divs.
For example
<div id="content">
<div >
<div >
TABLE HTML HERE
</div>
</div>
</div>
But I will never know how far down a table could be.
So I would ideally want to do something like:
#content table {
style here
}
But this applies to all tables within that div even if they're nested many elements down.
How would I say for this div and everything within it style the tables?
Yes, the space syntax indicates that you want to select any descendants of the parent, so #content table is fine:
http://jsfiddle.net/XnnLG/
Your current syntax is for a Descendant Selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child. Child Selectors use
#content > table
so, the syntax you have is correct for applying a style to a nested table.
An exception to this (as stated here) is if you have a more specific selector.
Using #content table should target all the tables within #content.
However, if there is a table, for example #test which is styled from another stylesheet, the #test is more specific than #content table, so the other style will overrule yours.
You can overrule that style using !important in your stylesheet, you should use that on every line, so it's not the cleanest solution.
For example:
#content table {
color: green !important;
background: red !important;
}
I read an article with some css file
#mainNav #toTop a {
float: right;
margin: 0 8px 0 0;
font-size: 40px;
}
Can someone explain why they have two # things in one css id type ? and how can I use it?
Thank you in advance
I don't know what you mean by a "CSS id type". So I'm just going to explain CSS in general, and we'll see if what this snippet is doing becomes clear.
In CSS you have selectors and property blocks. Your question is about a selector:
#mainNav #toTop a
Selectors are used to target (and on some other platforms to query) HTML (and sometimes XML) elements. This particular rule is using three simple selectors - two id selectors and a tag name selector - put together with two descendant combinators.
That means the selector will target (and the rule block accompanying it will affect) any anchor element (<a>) which is the descendant of any element with id=toTop which in turn is the descendant of any element with id=mainNav.
Since id elements are supposed to be unique, it might seem silly to have two of them in one selector. You can do it if you want to though, and sometimes you'll need to: we haven't spoken about selector specificity.
Specificity defines which rules take precedence over other rules. For example, if two elements both seem to target the same element:
form .label { color: blue; }
#contact-us .label { color: green; }
/* what color is the label? */
... then which rule takes precedence? To figure that out we calculate the specificity. I won't explain the math.
So, let's suppose you have a CSS stylesheet in your project which you can't change - it comes from a 3rd party vendor or something, and it looks like this:
#toTop a { /*...*/ }
If you needed to change the styling of the elements affected by that rule, what would you do?
You could (and probably would) define a new rule with greater specificity. One of the ways you can do that is by adding another id selector to your rule:
#mainNav #toTop a { /*...*/ }
But realistically you could just as easily add any other selector:
div#toTop a { /*...*/ }
Realistically whether it's necessary or not depends on what you're trying to do, what other rules it's interacting with, and what kind of HTML you're dealing with.
Here's another thing to consider: CSS stylesheets are meant to be re-used. What if that element should behave differently if it is in a different place in the document? What if the id="toTop" is sometimes inside the id="mainNav" element on some pages, and in a different place (let's say in the id="footer" element) on others? What if it moves, depending on client-side JavaScript? Then you might want to define CSS like this:
#mainNav #toTop a { /*...*/ }
#footer #toTop a { /*...*/ }
... so ultimately again, why a developer would choose to do this really depends on the CSS, JavaScript and HTML they are working with. It's definitely unusual, but it's not unnecessary nor bad practice.
ID must always be unique. However it is valid to use more than one id to make styles more specific.
In your example you are looking for an element with id #toTop inside #mainNav.
This is a perfectly valid CSS rule. It is very specific. The motivation for this use may have to do with how the page layout is designed and/or how JavaScript handlers interact with the DOM.
This is an example of poor CSS. The selector hierarchy in your example is redundant and unnecessary. It says select all a elements that are descendants of the element with the ID of toTop that is a descendant of the element with the ID of mainNav. So it assumes a basic structure like this:
<div id="mainNav">
<div id="toTop">
link
</div>
</div>
However, as IDs must be unique, only this is needed to target the same elements:
#toTop a
#mainNav #toTop a is using the Descendant Combinator to specify an element a descendant of an element with id toTop descendant of an element with id mainNav.
As said by other answers, this rule seems to be overly specific, because IDs must be uniques and then #toTop a should do the trick.
The real reason behind the choice of declaring this rule is:
Assuming that in a website you have one or more shared CSS (read:
you don't have an different CSS for every page), this rule means:
in a page where a is descendant of #toTop, but #toTop is descendant of an #mainNav element too, then apply this rule;
in a page where a is descendant of #toTop, but #toTop is NOT descendant of an #mainNav element, then DO NOT apply this rule;
because #toTop could be an reusable element that could be declared in different places (one-per-page, of course), for example inside the #mainNav in a page, and inside the #sideNav in another page, with a desired potentially different behavior and look-and-feel.
i'm using wordpress and i have an element i want to style... it's called...
<h2 class="widgettitle">
now, i know i can do,
h2.wigettitle {
whatever:css;
}
however, the problem i have is that i have multiple widgets with the same title and it effects all of them.
but, this h2.widget title is within another div called "headerarea".
so, in my file it's like...
<div id=headerarea">
<h2 class="widgettitle">
whatever title
</h2>
</div>
so is it possible to make this specific element do something like, #headerarea.h2.widgettitle or something in my element?
i tried styling the outer div independently, but the inner div is still grabbing styling from somewhere else, so i need to override all of them.
hope this makes sense... thanks for any help guys.
Use #headerarea h2.widgettitle. Including a space means to look in the children. If you include a > this means only look in direct children. Note that if your overrides do not work, add !important at the end to ensure they will override any other styles applied.
You can use the child or descendant selectors to accomplish this. Child selector > #headerarea > h2.widgettitle select h2 elements with class widgettitle that is a child of element with id headerarea. Descendant selector a space #headerarea h2.widgettitle select h2 elements with class widgettitle that is a descendant of element with id headerarea.
Also see http://www.w3.org/TR/css3-selectors/#selectors
#headerarea .widgettitle {
/* Put your styles here */
}