Is it possible to select the div elements with same class using css and apply different css attributes to these div elements.
My HTML:
<div class="image"><br/>a</div>
<div class="image"><br/>b</div>
<div class="image"><br/>c</div>
CSS:
div.image:before {
content:url(http://placehold.it/350x150);
}
//want to show different image for the three divs in html
JSfiddle: http://jsfiddle.net/htfhjzbo/1/
you can use nth of type selector
.image:nth-of-type(2) {
background: #ff0000;
}
<div class="image"><br/>a</div>
<div class="image"><br/>b</div>
<div class="image"><br/>c</div>
Just use the nth-child pseudoselector [parent element] .image:nth-child(n) and you can select them individually based on their position in the array of children with that class name (starting from 1).
As Alaa Mohammead mentioned, you can change the styles inline, but then it requires an !important declaration later if the site is responsive, so it's usually not a good practice to get into over simply using a stylesheet to apply the styles you want.
Related
I want to change the padding of 2/6 pages in my website, but the content divs of the website are using the same CSS, the only solution I can think of is changing the id's of all the content divs and make separate CSS for all of them. Is there an easier way to do this?
You could create a new class and apply it to only the places you want changed.
.pad-class{
padding:5px;
}
<div class="other-class pad-class"></div>
Placing the class last will allow for your new class to overwrite the first one.
You should just apply a specific class to the <body> tag of the pages you want to modify. Then you can write a CSS rule for that class.
HTML (normal page)
<body>
...
</body>
HTML (different padding page)
<body class="different-padding">
...
</body>
CSS
<style>
body { padding: 10px; }
body.different-padding { padding: 20px; }
</style>
<div class="first second"></div>
Insert second where you want to change padding else keep only single class
further reference: Using two CSS classes on one element
you can also use inline styling if no. of divs are less
Can anyone explain me what does the below css do?
.validate-error .validate-error {
color: #cc2424;
display: inline-block;
margin-top: 5px;
}
.make-switch + .validate-error {
margin-left: 10px;
}
In the first css i see the same class name used twice?. Is this css valid?. I came across this thread
What is the difference between the selectors ".class.class" and ".class .class"?
but unsure whether its applicable if we use the same class name twice?.
The first one styles child elements/descendant with the same class name:
<div class="validate-error">
This color may be different from #cc2424
<div class="validate-error">Has color #cc2424</div>
</div>
This means: The styles are applied/overwritten for child elements with the same class name.
The second one styles siblings:
<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>
That means: Only if .make-switch is followed by .validate-error the styles are applied to .validate-error.
Demo
Try before buy
.validate-error .validate-error {
...
}
This css targets a class .validate-error that is a descendant of .validate-error.
For example
<div class="validate-error">
<div class="validate-error">
</div>
</div>
Next css targets the class .validate-error when it is right next to .make-switch
.make-switch + .validate-error {
...
}
when selector parts are stuck together without whitespace it means it should all match the same element.
example: (should only match an element having both validate-error and other-class as classes)
.validate-error.other-class
when there is whitespace between them you are selecting an element that has other-class as a class and has a parent element with the validate-error class
the + in your second selector actually means you don't want a child of make-switch but you want the sibling element, but only if it has class validate-error
Yes it is valid. There are no rules in CSS preventing a class name appearing multiple times in a complex selector. There are no rules in HTML preventing two elements, one of which is a descendant of the other, from sharing membership of a class.
Id only should be unique, but classname we can use multiple times.
I have a webpage with elements, styles (imported and inline)
I want to reset the style for a specific element.
Example:
HTML:
<div class="parent">
This is the parent div, it colors the <strong>strong in red</strong>
makes a <small>small underlined</small>
<h4>sets a margin-left 10px for a H4</h4>
and many other stuff<br><br>
<div class="child">
this is the child element<br>
here a <strong>strong should not be red</strong><br>
<small>small should not be underlined</small>
<h4>H4 should not have a margin-left</h4>
and so on...
</div>
</div>
CSS:
.parent strong{
color:red;
}
.parent small{
text-decoration: underline;
}
.parent h4{
margin-left: 10px;
}
I want the child div to ignore the styles coming from his parents, including the html element
Here is an illustration of my example
The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS
The only solution I found so far is including the child element in an Iframe, but is really really ugly!!
Any one can help how to achieve this? A JS solution is also acceptable.
.child strong{
color:pink !important;
}
1.You adjust the injecting code css via !important.
2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.
Example
You can use css immediate child selector '>'
in your example
.parent>h4{
margin-left: 10px;
}
.parent>strong{
color:red;
}
check the updated demo
http://jsfiddle.net/WRDft/11/
Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx
CSS '>' selector; what is it?
This question has already been asked and discussed.
There is no way to blanket clear styles but there are work arounds.
Reset/remove CSS styles for element only
If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:
$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});
The JQuery code can then be wrapped in any sort of function you desire.
Here is your fiddle with the JQuery added. Hope that helps.
Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:
$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});
Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame
Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame
Can any body tell me how I use last-child selector to style my last div of subs?
This is my HTML -
<div class="main">
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="subs"></div>
<div class="paginate"></div>
</div>
I tried it something like this in my CSS -
div.main div.subs:last-child {
border: none;
}
But its not working. If I remove paginate div, then it is working. So can I know how can I style last subs div without any extra id or class declaration.
Thank you.
Assuming there is only ever 1 element succeeding your .subs (.paginate), you can use this:
div.main div:nth-last-child(2) {
border:none;
}
See this JSFiddle
This can be seen as a little hacky, and if your paginate element is ever absent, then the wrong sub element will be targeted. Your only other option is to give the .subs their own container and then use :last-child:
Another JSFiddle
P.S: To understand why :last-child isn't working the way you want it to, I really recommend also reading Spudley's answer.
The problem you have is because of :last-child doesn't work the way you think it does.
The :last-child selector will select an element only if it is the last child of its parent.
In the case of your .main element, the last child inside it is the .pagination div. This means that .main>*:last-child can only select the pagination div. It doesn't matter if you filter it down by specifying .subs; you can't select anything else using :last-child because none of the other elements are the last child of .main. If the actual last child element isn't in the filtered selection, it will select nothing rather than selecting something that isn't the last child.
The best way to work around this is to wrap your subs elements inside an additional layer of markup, so that the last one then does become the last child of that container element. Either that, or move the pagination element outside of the main element; whatever works best for your layout.
The other selector you might have tried, :last-of-type works in a similar way. For the time being, there isn't a CSS selector you can use instead to pick the last .subs element, using your current markup. (unless you're happy to go with :nth-last-child(2) which will pick the second-last child, on the assumption that the pagination div will always be present).
In the new selectors being designed for CSS4, there is a set of 'match' selectors that would do exactly what you want to do. You would use :nth-last-match(1) to get the last matching element. This is the selector you need. Unfortunately, it isn't available in current browsers, and there's no real hint yet as to when (or even whether) it will be available in the future. For the time being, you can read about it here, but not use it. You might be able to use it or something similar via a JS library like jQuery.
Hope that helps explain things to you.
I would suggest that you add an extra class name to the last element. http://jsfiddle.net/5FQck/
div.main div {
border: #000 thin solid;
}
div.main div.subs.last {
border: none;
}
<div class="main">
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs">subs</div>
<div class="subs last">subs</div>
<div class="paginate">pagination</div>
</div>
None of the following selectors work in IE 8 and below, primarily because they are all CSS3 selectors.
:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)
You could also add that new class to the last element using JQuery: http://jsfiddle.net/5FQck/1/
$('div.main div.subs:last').addClass('last');
If I understand you correctly, I would do it like this.
.main .subs:nth-child(4)
{
border:none;
}
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]