CSS selector that includes only top matches in a recursive structure - html

I have a "self-similar" (or recursive) HTML structure where I need to build a CSS Selector that catches only the top matches in this structure. For instance, given the following HTML:
<div class="option-block">
<div class="option">
<p>main content</p>
</div>
<div class="detail">
<div class="option-block">
<div class="option">
<p>child content</p>
</div>
<div class="detail">
<p>child detail</p>
</div>
</div>
</div>
</div>
I need a CSS Selector that gives me the first div within the top option-block, IOW, the div that contains the text main content.
I've tried with .option-block > div:first-child (and several variants like it), but that gives me also the div with the text 'child content'.
One thing to note is that this particular structure could be anywhere within the HTML document, so I don't have a prior reference to use as anchor (like they do here or here).
Another thing to note is that this structure could be self-replicating to more levels: the .detail component of an .option-block container could always have another .option-block container inside, so I cannot rely on counting or anything like that.
UPDATE: thanks for the answers so far. Something that I should have mentioned is that the selector is to be used programmatically to locate the items, not to apply styles. Also, the selector is to be applied from the context of an existing item, which may be already inside a this hierarchy.

I'm going to assume you can't just change your HTML structure (otherwise just add an extra class to the 1st level, or wrap the whole thing and check for direct ancestry).
You could check the ancestors of .option-block. This works if you're fairly sure there won't be other .option-block > .detail structures outside of your block.
:not(.option-block) > :not(.detail) > .option-block > div:first-child {
background: red;
}
<div class="option-block">
<div class="option">
<p>main content</p>
</div>
<div class="detail">
<div class="option-block">
<div class="option">
<p>child content</p>
</div>
<div class="detail">
<p>child detail</p>
</div>
</div>
</div>
</div>

I believe there is no support for recursive functions for :first-child and :last-child selectors (check here)
A possible solution may be giving the "main content" div.option another class to have an unique selector. Otherwise you can set a class in the .option-block divs that are inside a .detail div and use the :not selector:
.option-block:not(.inner-option) .option{ ... }

From what I’ve heard, there doesn’t seem to be a way to do what I need with a CSS selector. However, after some additional research it seems that XPath can work, something like this:
(.//div[#class=“option-block”])[1]/div

Related

How do I conditionally set a css style based on its children elements?

I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!

CSS selector every element except those inside a particle class

I'm trying to select every element within a wrapper except the elements within one of the children. Consider this:
<div class="wrapper">
<div class="this">
<div class="that"></div>
</div>
<div class="foo">
<div class="bar"></div>
<div class="orange">
<div class="ignore"></div>
</div>
</div>
<div class="hello"></div>
<div class="world">
<div class="ignore">
<div class="this"></div>
</div>
</div>
</div>
What I want to do is to make the text color of everything inside wrapper white, except the elements that are inside ignore. What I got so far is .wrapper *:not(.ignore *), which doesn't work.
EDIT: I can't accept solutions that include overriding what the color is within .ignore because that color is pre-set, and is out of my control. It is also impossible to know which color is used in the pre-set. Imagine there's a body {color:blue;}, only in my case, it's impossible to know what color it is.
Add color: #fff to .wrapper
Then, add whatever color your want to .ignore
After that, make sure .ignore loads after .wrapper in your style sheet.
.wrapper {
background: #131418;
color: #fff;
font-size: 25px
}
.ignore {
color: #933
}
<div class="wrapper">
<div class="this">
<div class="that">wrapper</div>
</div>
<div class="foo">
<div class="bar">wrapper</div>
<div class="orange">
<div class="ignore">ignore</div>
</div>
</div>
<div class="hello">wrapper</div>
<div class="world">
<div class="ignore">
<div class="this">ignore</div>
</div>
</div>
</div>
If you put them in right order you can get this:
.wrapper {
background: green;
}
.wrapper *:not(.ignore) {
color: white;
}
.wrapper *, .wrapper .ignore *{
color: red;
}
<div class="wrapper">
<div class="this">
<div class="that">1</div>
</div>
<div class="foo">
<div class="bar">2</div>
<div class="orange">
<div class="ignore">3</div>
</div>
</div>
<div class="hello"></div>
<div class="world">
<div class="ignore">
<div class="this">4</div>
</div>
</div>
</div>
Note that :not(...) is applied to the current element, so you can't use :not(something [some element inside])
I'd suggest:
.wrapper div:not(.ignore) {
color: white;
}
The reason your posted CSS selector doesn't work – and shouldn't be expected to work – is because:
.wrapper *:not(.ignore *)
Is trying to select all descendent elements that are not descendants of the .ignore elements, whereas in your question it seems that you're trying to select only elements that are not themselves of the .ignore class.
Further, the :not() pseudo-class:
...is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
[Emphasis mmine, https://www.w3.org/TR/css3-selectors/#negation].
And a 'simple selector' is:
...either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
[https://www.w3.org/TR/css3-selectors/#simple-selectors-dfn]
Which appears to prevent the use of a combinator, the white-space, representing the selection of a descendant; meaning that your selector .ignore * is an invalid selector for the negation (:not()) pseudo-class.
Pure CSS doesn't seem to provide a good solution - at least not one I can think of.
The problem with not is it can only apply to "simple selectors", which basically means the selector it applies to can't contain combinators like whitespace.
For simple cases, you could do what a lot of people are suggesting - just have a second rule that selects .ignore * and undoes what your .wrapper * rule does. But if the .wrapper * rule does a lot, or if the exact state you'd get without the .wrapper * rule is unclear (maybe set by an external resource) then that isn't necessarily practical.
What you could do is use JavaScript (or similar) to propagate the .ignore class down to all of its descendants, then just use :not(.ignore)

Better way to apply CSS to the targeted element

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

Identify div through css

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.
}

CSS pseudo-classes

I have a problem, maybe it's obvious, but I couldn't find any answers how to do this.
I have a structure like this on my website:
<div class="row-even">
<article class="featured-job">a</article>
</div>
<div class="row-odd">
<article class="featured-job">b</article>
</div>
<div class="row-even">
<article class="regular-job">a</article>
</div>
<div class="row-odd">
<article class="regular-job">b</article>
</div>
<div class="row-even">
<article class="regular-job">c</article>
</div>
This tiny thing is generated by PHP for listing some articles from two types, a Featured job, and a Regular job. I want to separate these two content types by adding a margin-top for the first one of the .regular-job articles. I tried using first-line, first-child, first-of-type, all from the first-* and even tried nth-child, but nothing worked for me.
(I know these separators working on the parent of the element I am using on.)
Is there any way it can be done?
The problem with first-child and regular-job is that the articles are not directly in the same parent because they are nested in row-even & row-odd. You either could wrap the regular-job rows in another div which gets the margin applied or add another class to the first row containing a regular-job. You could even add a class directly to the first regular-job.
I don't know how you PHP loop looks like, but maybe try to use a counter for that matter.
If needed I will gladly provide an HTMl/CSS example!
You would probably want to do someting like that:
div:first-child .regular-job {
margin-top: 20px;
}
You select the first parent element that has the child of .featured-job.
PS. Be careful where you are applying the margin, it won't work on inline elements or if you want to separate the parent elements then applying it to the article is not a good idea.
As Sven says, the problem is that you need the elements to be siblings for this selectors to work.
Set a class in the parent, matching the one of the child:
HTML
<div class="row-even featured-father">
<article class="featured-job">a</article>
</div>
<div class="row-odd featured-father">
<article class="featured-job">b</article>
</div>
<div class="row-even regular-father">
<article class="regular-job">a</article>
</div>
<div class="row-odd regular-father">
<article class="regular-job">b</article>
</div>
<div class="row-even regular-father">
<article class="regular-job">c</article>
</div>
Then, it is easy to set the CSS. for instance:
.featured-father + .regular-father article {
background-color: red;
}
fiddle
while iterating in the PHP, add another dummy class with index.
Then it will be a piece of cake to make your custom class:
<div class="row-even featured_1">
<article class="featured-job">a</article>
</div>
<div class="row-odd featured_2">
<article class="featured-job">b</article>
</div>
<div class="row-even regular_1">
<article class="regular-job">a</article>
</div>
<div class="row-odd regular_2">
<article class="regular-job">b</article>
</div>
<div class="row-even regular_3">
<article class="regular-job">c</article>
</div>
notice the two introduced classes: featured_X and regular_X.
then:
.regular_1{
margin-top:50px;
}