I have a style sheet that consists styles that affects two elements in my page, I can't change the classes for my elements, is there any way to make sure that the styles apply to only one specific element in my page not for the other.
Have you tried the first-of-type selector?
ex.
p:first-of-type {
background:#ff0000;
}
Yes. You can do that by specificity.
Select topmost parents and go on targeting their childs until you reach the last child element that you need to apply styles for.
If you can add an id to it or if any id is dynamically generated, just create a specificity for the same and you will get your thing done.
For Instance,
body div#your id name div.your_class1 > div.your_class_element_that_you_want_to_style{/* your values */}
Hope this helps.
PS: In the illustration, div is used as a reference and you can select the elements accordingly to your HTML structure.
If there are two, you use the :first-of-type selector:
div.selector:first-of-type {
/* styles here */
}
Related
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
There are tens of CSS rules I would like to be applied on a section of a page - this part is easy:
.generalStyles a,p,button,div.foo {
/* many styling rules here*/
}
However, when I mark a section of a page with class="generalStyles", I would like certain subsections not to inherit those styles, such as descendants of class="noGeneralStyles" (1). This should work with arbitrary nesting.
What I am looking for is a selector that could be translated into:
Inherit CSS rules if you are a descendant of .generalStyles, but not
when .noGeneralStyles is a closer parent
An interactive jsFiddle example can be found here
EDIT: The solution (if there is any) should not make any assumptions of inner HTML
(1) - the reason is there are way too many CSS rules to reset
You won't be able to limit or otherwise control inheritance chains using selectors alone, not even through combining :not() and descendant selectors for the reasons given here and here. You will have to provide an overriding rule for elements within .generalStyles .noGeneralStyles.
How about using direct descendant selectors? > means it will select button tag, which is direct child to an element having class noGeneralStyles or generalStyles
Demo
.noGeneralStyles > button {
color: black;
}
.generalStyles > button {
color: red;
}
There are already many questions related to this. But I'm still not clear. Also not sure if the title of the question is correct. Here's my problem:
What the below CSS code means?
#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }
As per my understanding, please correct me if I am wrong:
Line 1: every li element within any element with id="nav" will have styling cssA
Line 2: When I put my cursor over every li element within any element with id="nav" will have styling cssB
Line 3: every a element within every li element within any element with id="nav" will have styling cssC
Line 4: When I hover every a element within every li element within any element with id="nav" will have styling cssD
Line 5: Every span element within every a element within every ul element within every li element within any element with id="nav" will have styling cssE. Also anyother ul or a element will not have this style untill unless the parent element has id="nav"
You are correct on all except .over, The "." represents a class. and "#" represents ID. But yeah, you've got the concept down.
Also, if you want to "Override" as the title says, you'll add
!important
to the end of any rules you want to take precedence over the others.
you can override the css by giving !important or you can give inline style.
priority of inline css is high then external css
All of the existing answers are correct, but there is a bit more to it than has been given already.
As has already been said, "li.over" is a combined selector - it will selector li elements that also have a class of "over". If you wanted to use different CSS properties or property values whilst the mouse is over (hovering over) the element then you use the pseudo class selector "li:hover". These are called pseudo class as you aren't selecting something that is part of the document, but based on the state of an element. There are also pseudo elements which again aren't in the document directly, but logical extensions of the document structure - for example first-child, first-of-type, fifth-of-type, odd items etc.
"#nav li ul a span" is a descendant selector, as you say it will select elements that are children (at any level) of each parent, so "#nav li" selects "li" elements contained within an item with ID "nav" - even several levels down.
If you want to select items that are direct children of the parent then you can use the ">" symbol. I.e. "#nav > li" will select li elements that are directly below any item with an ID of "nav", but not any li elements that are children of that element, or indeed elements below that.
Incidentally "#nav" is exactly equivalent to "*#nav" as it selects any element with the ID, you could also write "ul#nav" if you only wanted to select ul elements with the ID. This could in turn be combined with a class "ul#nav.bar" or even multiple classes "ul#nav.bar.touch".
Removing the space between the selectors like this combines them, so in the last case instead of looking for an item with class "touch" inside an item with class "bar" inside an item with ID "nav" inside a "ul" element, you are selecting a "ul" element with an ID of "nav" and both the classes "bar" and touch". An element like this-
<ul class="bar touch" id="nav">...</ul>
It is also possible to use attribute selectors, so if you wanted to select links which will open in a new window you could use "a[target=_blank]" - which selects based both on the presence of the attribute and the value - or if you wanted to select links with any href value you could use "a[href]". This simply selects all elements with this attribute.
On top of that you can even select items which are adjacent (next to) another element, if you wanted to select all paragraphs directly following an image then you would use "img + p" in your selector, or "p + img" if you wanted to select images directly following a paragraph. As always the last item in the selector is the one the styles are applied to.
It is generally considered good practice not to be overly specific with CSS selectors, as it makes your code much less re-usable. Unless you need to write "div.widget" just write ".widget" as the otherwise you'd not be able to create a "widget" using other elements, and it makes it much harder to override these properties later on in those cases you might need to.
To wrap up selectors, there's a good introduction to CSS selectors on MDN and Code School (paid course provider) also have a excellent online foundation course on CSS available for a very reasonable price which will go through selectors in some detail.
With regard to overriding classes, there are two further concepts you should understand - cascade order and specificity.
Given a HTML snippet of-
<div class="widget">
<p>
Some text you want to style
</p>
</div>
And the following CSS-
#widget p { color: yellow; }
p { color: blue; }
The color of the text would be yellow and not blue because the specificity of the first selector is greater (more specific) than the second. To understand this I suggest you have a play with a Specificity calculator and have a read of the Smashing Magazine tutorial on the subject.
In short though, inline styles trump all, and the more specific a selector the more likely it is to be applied in place of other selectors that would otherwise apply different property values. The value in the selector with the highest specificity score "wins", but other property values from selectors with lower specificity that do not clash will also still be applied to the element.
For example, altering our earlier CSS-
#widget p { color: yellow; }
p {
color: blue;
font-weight: bold;
}
The text will still be yellow, but will also be bold as there is no font-weight property given in the selector with higher specificity.
The last concept you should understand is what happens when two or more rules have identical specificity.
#widget p { color: yellow; }
#widget p {
color: blue;
font-weight: bold;
}
In this case our text is now blue as the second rule appears later in the stylesheet and thus overrides the first. If you have multiple stylesheets then the rules from the last stylesheet to appear in the document head will override rules with identical specificity.
In almost all cases you should use a more specific or the order of the selectors within the stylesheet in order to apply the right styles to the right element, and absolutely should not be routinely using the !important flag to achieve this unless absolutely necessary. See http://james.padolsey.com/usability/dont-use-important/ for a fuller explanation than I give here, but it rapidly becomes unmaintainable (what do you do when everything is "important") and it is also not accessible for users who may wish to override your styles in their user agent stylesheet (local to their browser) in order to help them read or use the page (increasing font size, contrast with background colour etc.)
Is there any way that parent tag styles do not apply to child tag elements?
I have to display some data so I wish to align them in table for better view. I want to apply some styles to the table to make it look good. I am using some additional components (like plugins) in my table. So if I do apply any style to tr tag of my table, those are applied to those components tags too, if they have tr tag. This should not happen...
Is there any way that I can avoid inheritance?
<style>
/*The plug-in component may have table tr tags.So the following styles should be applied to plug-in..*/
table tr{
background:#434334;
border-radius:5px;
}
</style>
CSS are meant to be inherited like that. If you want to "not inherit" you have a few options:
Best: improve your selectors so that they only apply to the elements you need them to
Good: if existing markup does not allow you to do the above, help by giving the element(s) that need to be styled an additional attribute (e.g. extra class) that allows you to improve the selectors
Bad: write your selectors so that they apply globally, then write more selectors to "undo" the results on a case by case basis
In your case, it looks like a combination of the first two would work. You can give an id="foo" to your table and then change the selector to
table#foo > tbody > tr { /*...*/ }
The > is the child selector, which prevents the style from being applied to table rows further down the element tree.
One solution would be to name your style table tr.style1{ ... and then in each of your <tr>'s you could just add a class attribute, i.e. <tr class="style1">.
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.