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.
Related
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.
I am creating a div that will have a default style but is also going to have various options for different styles depending on the content. My goal is to be able to have these styles take effect only when nested inside of the custom class name. Kind of hard to explain verbally so I'll give some code examples of what I mean:
This will be the html structure for the default view:
<div>
<div class="default"></div>
</div>
This will be the html structure for the custom view:
<div class="custom">
<div class="default"></div>
</div>
So basically I need to be able to write a class that will say "redefine these styles on default only when default is nested inside of custom"
Really just looking for confirmation on the syntax involved here.
My first thought is to write something like:
.custom .default {
declaration: attribute;
}
I'm just a little unsure of whether this will only target default when it's inside of custom or if this will globally redefine default, I can't live test it just yet because ftp transfer hasn't yet been set up for me on this server.
Thanks in advance for any clarity on this!
Yes, that's right. This will target any .default contained by a .custom (at any point in its ancestry) (fiddle):
.custom .default {
color: red;
}
See the descendant combinator and others.
And yes, it can override declarations specified by .default (fiddle):
.default {
color: green;
}
.custom .default {
color: red; /* overrides green */
}
Have a look at selector specificity.
So, canon's answer is enough... But, just for the clarity that you asked.
You can restrict your selector to target only a nested element, with two methods:
Descendant Selector: It's written with a white space and targets the child element at any nested level inside the parent:
MDN ref docs
.parent .child {
/*styles*/
}
Child Selector: It's written with a > charachter, and targets the child only if it is directly nested, an immediate child:
MDN ref docs
.parent > .child {
/*styles*/
}
You were right. And if you want to make sure to target only the direct descendants, you can do this:
.custom > .default {
declaration: attribute;
}
That would be helpful in case you had something like:
<div class="custom">
<div class="default">
<div class="default"></div>
</div>
</div>
CSS will look for an element that has a class of default which is encapsulated within a parent with the class custom, any child nodes which match this rule will have the styling applied to them, you can create as many different themes for the same element as you wish, so long as you change the class.
So your code:
.custom .default {
declaration: attribute;
}
Is perfectly correct.
Is there a way to style only the first element with a specific class? The :first-child psuedo selector seems to only work on tags.
EDIT: Not all classes have the same parent element so :first-child isn't an option.
You may try like this:
<div>
<p class="blue">1st</p>
<div class="blue">2nd</div>
</div>
<div>
<div class="blue">3rd</p>
<div class="blue">4th</div>
</div>
So this will make only the first element as blue
Also check :first-child pseudo-class
The :first-child pseudo-class matches an element that is the first
child element of some other element.
.class-name:nth-of-type(1)
This should style what you want
JsFiddle example
This should work .classNamep:first-of-type
You need to double check your class name. A typo could happen.
See this fiddle. It shows you that :first-child works even with class selectors. :)
Code:
<span class="spana">first</span>
<span class="spana">second</span>
.spana:first-child {
background-color: #ddd;
}
Using the nth-child() pseudo class selector is a good approach, this is supported in all major browsers, including IE9+.
Here is the example HTML:
<div class="blue">Will be blue</div>
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>
And the CSS:
.blue:nth-child(1) {
color: blue;
}
This will select the first div of class name blue. Bare in mind that the first iteration is selected by passing 1 into the pseudo class, not 0 like arrays for example.
There are also other key features of the nth-child() pseudo class; as well as passing in numbers like I have shown previously, the pseudo class also supports key words such as even or odd like so.
//Applies styling to every even instance of the class .blue
.blue:nth-child(even) {
color: blue;
}
//Applies styling to every odd instance of the class .blue
.blue:nth-child(odd) {
color: blue;
}
This can also be taken further; a formula can be expressed as to exactly which elements the styling is to be applied to.
The formula is expressed an+b, where a is the frequency of the elements to select, and b is the offset. So the formula 3n+4 will apply styling to the fourth element, and every third element beyond that. (4, 7, 10, 13, 16, etc...). Below is an example of how this can be applied.
//Style every 6th instance of the class .blue, starting with the second element. (2, 8, 14, 20, 26).
.blue:nth-child(6n+2) {
color: blue;
}
If no offset is required then simply pass in the same formula as before, dropping the offset at the end; passing in 4n is an example of this.
I hope this helps, I feel that this pseudo class is very powerful, and equally under rated by a lot of people.
There is no first-of-class selector.
See BoltClock's answer (CSS3 selector :first-of-type with class name?)
There is a work around but it didn't work for me
I have this HTML:
<h2 class="first second">Red</h2>
<h2 class="second">Blue</h2>
<h2 class="first">Green</h2>
How can I select h2 with first and second class?
thanks about answers
Update:
If I have another h2 tag like this:
<h2 class="first second third">Default</h2>
it will be red with h2.first.second selector. Is there any way to select only element with first and second classes, not more.
Simply:
h2.first.second {
color: red;
}
This selects the h2 element with both classes "first" and "second". Refer to the CSS Selectors Level 3 W3 recommendation for more info.
JSFiddle demo.
If you are trying to select h2 with first and second class simutaneously
h2.first.second
I have created a working CodePen example of the solution.
h2.first.second {
/* styles go here*/
}
To select elements that have multiple classes simple use this:
h2.first.second
Note that there is no space between the classes, as apposed to the following which would select elements with the class of second which are inside a h2 element with the class of first
h2.first .second
You can select
.first.second {}
if you want only the first h2 to be selected. Make sure there is no space!
The following rule matches any h2 element whose class attribute has been assigned a list of whitespace-separated values that includes both "first" and "second":
h2.first.second { color: red }
Reference
But, to select an element whose class attribute exactly equal "first" and "second" I used this rule:
h2[class="first second"], h2[class="second first"] { color: red }
JsFiddle demo.
I have a container with children:
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
Sometimes I want to add another child (server-side) into the container and change the styling of the other children to make room for their new sibling. It would become:
<div id="container">
<div id="special"></div>
<div></div>
<div></div>
<div></div>
</div>
Can I achieve this purely in CSS? Are there fancy new selectors (CSS4?) that I can use?
I want to avoid JavaScript or changing the attributes (classes) of any of the elements. I did read about the lack of parent selectors in CSS but the articles I read are a couple of years old, so I suspect there might be some brand new selectors I can take advantage of.
#container #special {
float: left;
background: yellow;
}
#container div {
/* already float: none; by default */
background: white;
}
is the simplest way to style elements differently in CSS: all div are styled because of the second rule (whether or not the special element exists or not) and the first rule will apply to one special element if it exists, with more specificity than the first one. Both rules will apply so properties in the first rule should override those in the second rule.
Now if you want to style the other divs differently when the special element exists:
In your example, no div precedes the special one so you don't need a preceding sibling selector; using the general sibling selector is sufficient:
#container div {
padding: 5px;
}
#container #special ~ div {
padding: 10px;
}
Could the special element be also created in 2nd, 3rd, etc position?
Then a similar trick to selecting first half of the elements could be used (combination of :nth-child()/:nth-last-child(), but it has limitations, like an upper bound of elements to be set and it won't work with more elements than that - and the selector will be looooong and relatively inefficient. Will gzip really really well though :) )
No.
This won't ever be supported by CSS. Even with advanced selectors in CSS4, they are selectors. They select something that is in the DOM. They can't produce a new HTML element.
To do this in jQuery, just use the before() method
$("div.special").before("#container div:first")
I'm guessing you could try some sibling selectors along with not selectors... something like:
.special+div:not(.special){ /*some special style here*/ }
.special+div+div:not(.special){ /*some special style here*/ }
.special+div+div+div:not(.special){ /*some special style here*/ }
up to n divs...
.special+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div:not(.special){ /*some special style here*/ }
if you have access to scss you can do something like:
#for $i from 1 through X { //REPLACE X WITH A NUMBER
.special #for $j from 1 through $i {+div}:not(.special):{/*some special style here*/};
}
I'm just guessing about the scss formula, but it should be something like that :D
Also, depending on what you want to achieve there might be other options. Could you be more specific on the styles you want to apply?