Trying to only color certain every other div of class 'story':
<div class="wrap-well">
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
</div>
CSS:
.wrap-well div.story:nth-child(even) {
background-color:#ff00ff;
}
Fiddle:
http://jsfiddle.net/NF2dk/
But it seems that 'clearfix' columns are also counted...
#Marcin and #Explosion Pills is absolutely right here, but as I inspected your DOM, you've a consistent pattern going on there, you can use Adjacent selector to achieve this rather than using nth-child or nth-of-type
.wrap-well div.story + div.story {
background-color:#ff00ff;
}
Demo
This way, it will just do the job what you wanted to achieve, also it's much more compatible compared to nth pseudos
nth-child does not work with the selector, but the element. It selects each even div regardless of the composition of the selector.
You can use nth-of-type to only select <div> elements and use another element such as <br> for the clearfix.
http://jsfiddle.net/NF2dk/1/
There is nothing like nth-of-class() selector.
The closest you can get is nth-of-type(). But it will look at the element tag, not class assigned to the element.
Related
How to organize the HTML structure and apply CSS. Which does not conflict with others CSS.
Which is the better way to apply the CSS to the targeted element?
Way 1:
.PARENT_1 .CHILD:first-child {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Way 2:
.PARENT_1_CHILD_1 {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD PARENT_1_CHILD_1"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Any other way to improve CSS Specificity?
Can I use Bem Methodology?
If you want to apply CSS only to one element at a time, use an id for the element e.g.
if you target only one element wrapped inside a div, you can write it down in css like this: #divname > #something.a (when #something.a is first element inside the wrapper div) OR**
simply #divname #something.a - this will find the element with id anywhere inside the wrapper div.
Hope you got the point. :)
Here are css Methodologies you can find a depth explanation:
Examples of CSS Methodologies:
OOCSS, SMACSS, Idiomatic CSS and BEM
Title CSS Simple Approach CSS Class Naming
I have some nested elements like this:
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this"></div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this"></div>
</div>
<div class="three select-this"></div>
I want to select all .select-this which are inside .select-inside-this but not those which are wrapped in .not-inside-this. So in the end, i should be able to select only two.select-this from the above code.
The CSS I've tried but did not work:
.select-inside-this :not(.not-inside-this) .select-this {
/* style here /*
}
or:
.select-inside-this *:not(.not-inside-this) .select-this {
/* style here /*
}
Any workaround here?
I don't want to use JavaScript here. I need pure CSS3 solution.
EDIT: I don't want to use direct child (>) selector. As I've asked, I want to select all those element from any level just without the exception wrapper.
:not(.not-inside-this) and *:not(.not-inside-this) with the * are equivalent; in the case of the former, the universal selector is implied. See the spec.
It is currently not possible to construct a CSS selector that matches elements that are not descendants of specific elements for the reasons given in the following questions:
CSS negation pseudo-class :not() for parent/ancestor elements
Is the CSS :not() selector supposed to work with distant descendants?
The selector
.select-inside-this :not(.not-inside-this) .select-this
matches .select-this elements that are descendants of some element that is not .not-inside-this, which in turn is a descendant of .select-inside-this. It does not match .select-this elements that are not descendants of .not-inside-this within .select-inside-this.
This means, first off, that your selector will incorrectly match the following:
<div class="select-inside-this">
<div class="bar">
<div class="not-inside-this">
<div class="select-this"></div>
</div>
</div>
</div>
... because one of the ancestors of .select-this, .bar, is :not(.not-inside-this).
Additionally, this implies at least three levels of nesting (though it could be more). In your example, there are no other elements between .two.select-this and its containing .select-inside-this, so it will never match that element. This is why James Donnelly suggests adding .select-inside-this > .select-this to account for that particular case.
However it is still not possible to write a single complex selector using descendant combinators to match elements without a specific ancestor. The only way is to repeat the child combinator method with as many :not(.not-inside-this) as necessary, but this requires that you account for all possible cases. If you can't do that, then you're out of luck with CSS selectors.
You can use the Child Combinator Selector > to specify direct children:
.select-inside-this :not(.not-inside-this) .select-this,
.select-inside-this > .select-this {
/* style here /*
}
This selects any .select-this element which is not a descendent of any .not-inside-this element and also selects .select-this elements which are direct children of .select-inside-this elements.
body > .select-inside-this :not(.not-inside-this) .select-this,
body > .select-inside-this > .select-this {
color: red;
}
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this">
This should not be selected
</div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this">
This should be selected
</div>
</div>
<div class="three select-this">
This should not be selected
</div>
A little bit late to the party, and it might not match your use case, but this is what I ended up doing:
HTML:
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this"></div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this"></div>
</div>
<div class="three select-this"></div>
CSS:
.select-inside-this .select-this {
background: blue;
}
.select-inside-this .not-inside-this .select-this {
background: none;
}
The trick is to positively select the negative element and just undo the style.
It'll work for simple use cases, at the very least.
I ended up
styling but hiding the styles by default, and then
revealing them on the nested element only.
Example with image backgrounds:
.box{
height:100px;
background-image: url("img.jpg");
background-repeat: no-repeat;
background-position: top 100px left 0; /*hide by default (here by shifting position)*/
}
.container .box{
background-position: top left; /*reveal in the nested*/
}
Hope you find a way to hide the style you need in place in a similar way.
.post .post_author div.author_avatar img {
}
edited: to be clear, I have a given CSS ruleset, that I would like to apply to my html, and i would like to know how to set up the html to apply the ruleset when the rules specify a collection of classes.
how do i reproduce that selector in html from the CSS?
<div class="post post_author author_avatar"><img /></div>
doesnt that give me the css styling?
Your selector represents
an img element
that is a descendant of a div element with the .author_avatar class
that is a descendant of an element with the .post_author class
that is a descendant of an element with the .post class.
Each of these classes is represented by a separate element. The space between each selector is a descendant combinator. So you will need to create up to three divs (or other elements depending on your layout, but .author_avatar must be a div):
<div class="post">
<div class="post_author">
<div class="author_avatar">
<img />
</div>
</div>
</div>
Try .post.post_author.author_avatar img.
I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}
I have the following html
<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
And the following style:
DIV.section DIV:first-child
{
...
}
For some reason that I don't understand the style is getting applied to the "sub contents 1" <div> as well as the "header" <div>.
I thought that the selector on the style would only apply to the first direct child of a div with a class called "section". How can I change the selector to get what I want?
What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.
It is unclear to me whether you want both children of the main div or not. If so, use this:
div.section > div
If you only want the header, use this:
div.section > div:first-child
Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.
Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.
Found this question searching on Google. This will return the first child of a element with class container, regardless as to what type the child is.
.container > *:first-child
{
}
CSS is called Cascading Style Sheets because the rules are inherited. Using the following selector, will select just the direct child of the parent, but its rules will be inherited by that div's children divs:
div.section > div { color: red }
Now, both that div and its children will be red. You need to cancel out whatever you set on the parent if you don't want it to inherit:
div.section > div { color: red }
div.section > div div { color: black }
Now only that single div that is a direct child of div.section will be red, but its children divs will still be black.
The CSS selector for the direct first-child in your case is:
.section > :first-child
The direct selector is > and the first child selector is :first-child
No need for an asterisk before the : as others suggest. You could speed up the DOM searching by modifying this solution by prepending the tag:
div.section > :first-child
Use div.section > div.
Better yet, use an <h1> tag for the heading and div.section h1 in your CSS, so as to support older browsers (that don't know about the >) and keep your markup semantic.
div.section > div
Not exactly the question asked, but maybe useful:
div.section > :first-child:is(div)
This would match only the first child element of .section and only if it was a div.
Match:
<div class="section">
<div>MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
No match:
<div class="section">
<img ... >
<div>NO MATCH</div>
<div>NO MATCH</div>
<div>
<div>NO MATCH</div>
</div>
</div>
This is how I solved when using TailwindCSS (v3.1) with arbitrary variants.
I only wanted the first column in table to be underlined when hovered, as it is a link.
[&>:first-child]:hover:underline