I want to use this CSS and HTML http://jsfiddle.net/6VntE/ but many of the selectors are conflicting with previously used selectors (body, H1, div). So while it works in jfiddle, it doesn't work in my site.
Is there a way to section off this css from the rest of the site so that it will work?
If you don't want to apply a css style to apply on All div then you should use classes or id to design element instead of using tag name.
Suppose If you are doing like this
h1{font-size:10x;}
then it will style all the h1 , but if you want to design only some elements
then write
.style_h1{font-size:10px;}
and to your h1 tag which to be styled add class="style_h1"
OR
add a parent to your h1 with some class called parent and then inside that design all h1
.parent h1{font-size:10px;}
and to your h1 tags add a parent element having class parent
Related
I am new to front end development, especially the styling.
I find css classes written like shown below:
.Header-bar p {
font-size: 18px;
}
.Header-bar p span {
font-weight: bold;
}
.Header-bar p span span {
font-weight: normal;
}
I understand that this means to apply font-weight: normal; to the span element which is inside another span element which is in p under div where the class is mentioned.
This doesn't seem like a good practice. I want to create re-usable classes that I can use in my code.
How should I be changing this style to better align to my needs.
When we are talking about styling and CSS I think it's important to keep in mind the specificity levels of a CSS selector.
What is Specifcity ?
It's what defines how broad the scope of your stylying rule is.
Simply put :
The less specfific a rule is - the more abstract it is - and the more elements it will capture.
The more specific a rule is -less abstract it is - and less elements will capture.
More specific rules overwrite/replace less specficic rules.
In your example you have chosen a a rule style , which is applied to a very specific element , in this case .Header-bar p span span {font-weight: normal;} and ONLY that element.
However , if you had only written .Header-bar{font-weight: normal;} it would work aswell , except you would be applying that style to not ONLY that element but also ALL the other elements which are contained in that class.
When you want to be more specific and not write all the path to get to that element, you can simply give the HTML element an ID and use it then on CSS , like this , for example :
<footer>
<div>
<div>
<p id="IDsomething"></p>
</div>
</footer>
</div>
Then select on CSS :
#IDsomething { font-weight :
normal;
}
There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
You can easily create a particular unique class that's going to be for a particular styling or set of styling. For example creating a class called "normal" and then adding the font-size property of normal, it'll be easily re-usable that way i.e you can add it to any part of your code if you want the font-weight styling of that particular element to be normal.
Just apply a class to the span which you want to style, then create a CSS rule for that class. Selectors like .Header-bar p span span are rather used when you can't change the HTML code (or at least the structure) yourself.
Concerning reuseability of classes: That class can be used on as many elements as you like, and those elements can be divs, spans, headings or whatever.
I have a div.container that has lots of p elements inside it. Few of them has class p.special. I need to select p.special elements, but ONLY if they are NOT at the very top of the parent element (not first child element of parent .container).
P.S. I know this can be done easily with jQuery, but I'd prefere plain CSS solution for this.
Here I made explaining sample picture to make myself clear:
Using the :not and :first-child selectors should do it.
.special:not(:first-child) {}
I have some HTML as follows ( you can assume closing tags )
<ion-content>
<ion-tab>
The problem is, when the DOM is created, the HTML5 tag creates a div which I cannot edit using CSS
It becomes as so
<ion-content>
<div class="foo">
<ion-tab>
I need to edit the CSS of the div whose class is "foo", however, if i change the CSS of foo, i change the CSS of all the classes using "foo".
How do I specifically apply CSS to that specific div when I dont create it myself?
With the small amount off details you have given us, all I can do is refer to these CSS Selectors.
There are number off ways to style a specific element. All have been explained in detail in the link I have given you.
Edit: CSS Selectors explained in detail.
There are several ways to change the style of <div class="foo">.
You could give the div an (extra) #id or class. This makes it able to apply certain styles, just you would do normally, to this specify element.
Another option would be parent child {} where you could style all the children within parent. Note: you could add '>/+/~' to be more specific of the place of child within parent.
A third option would be to specify at what place the div is within its parent using :nth-child(n) or nth-of-type(n).
As I said before, there are many ways to style a specific element. Please take a look at the link I provided.
I'm working on a design for a blog. Is there a css selector (or other way that doesn't involve the user adding a class or id to a blockquote tag) that will allow me to differentiate between a blockquote that occurs at the very beginning of a div from a blockquote in the middle of a div after some text blocks?
That is, I'd like blockquotes that are the start of a blog post to have one set of css styles, and blockquotes that occur in the body of a blog post to have other style parameters.
Is this possible?
Simply:
div > blockquote:first-child {
...
}
JSFiddle demo.
This combines the child combinator (>) with the :first-child structural pseudo-class to select the div element's direct child blockquote element only if that element is the first child.
To then style blockquote elements which aren't the first child, you'd simply use the div > blockquote selector, as this has lower specificity than the one above.
You are looking for nth-child by the sounds of it.
Read this: http://css-tricks.com/how-nth-child-works/
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 */
}