select element based on nearest ancestor - html

I want to write a CSS code that becomes selected based on the nearest ancestor. For example in this HTML:
.ancestor1 .child {
color: red;
}
.ancestor2 .child {
color: blue;
}
<div class="ancestor1">
<div class="ancestor2">
<div>
<p class="child">Hi</p>
</div>
</div>
</div>
<div class="ancestor2">
<div class="ancestor1">
<div>
<p class="child">Hello</p>
</div>
</div>
</div>
I want the second p tag(Hello) become red, but it's blue because the .ancestor2 .child is become later in CSS file.
Sorry for my bad English.

To do this, the most easy way is to use jQuery. if you use jQuery you can use the function closest. To get the div its closest to you. If this is not the right div call closest to the div that was closest to your child until you get the wanted div. Have a look at: Closest
Sven

You may try this: If I understand your question, may be you may try this
.ancestor1 p.child{
color: red;
}
<div class="ancestor1">
<div class="ancestor2">
<div>
<p class="child">Hi</p>
</div>
</div>
</div>
OR it is better to use jquery/javascript
$(document).ready(function(){
$('.ancestor1').find('.child').css('color', 'blue');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ancestor1">
<div class="ancestor2">
<div>
<p class="child">Hi</p>
</div>
</div>
</div>

Very ambiguous question. Is it really CSS you are pertaining to and not JavaScript?
And if you are pertaining to javascript, it is most likely that this is a duplicate question if not related.

Related

Selecting first instance of an element with css

I have some markup that looks like this:
<section id="accreditation">
<div class="container">
<div class="row"></div>
<div class="row-accreditation">
<div class="col-md-4">
<img>
</div>
<div class="row"></div>
<div class="row-accreditation">
<div class="col-md-4">
<img>
</div>
</div>
</div>
</section>
How can I select the img in the first .row-accreditation div? I've tried using first-of-type and first-child selectors but both do the same thing which is selecting both of the images. I also tried to recreate the accepted answer from this thread like so...
#accreditation div.row accreditation > img ~ img {blah}
...but without success.
Is this possible with css, and if so what is the best way to do it?
It does work this way in your particular example:
.row-accreditation:nth-child(2) > div > img {
...
}
http://codepen.io/anon/pen/wzWwxK
But I don't know if the HTML structure will stay the same in your application.

Seperate css for 4th sub element in a row

I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle

Select child elements multiple levels down the tree [duplicate]

I've got a a bunch of DIV elements in my HTML, several of which have their class attribute set to "rowsLayout". Some of these rowsLayout DIVs can be nested inside one another. I want to define a CSS selector that only targets the deepest DIVs in those nestings. That is, I don't want any of the rowsLayout DIVs that contain any other rowLayout DIVs.
<div id="a" class="rowsLayout">
<div id="b" class="rowsLayout" />
<div id="c" class="rowsLayout">
<div id="d" class="rowsLayout" />
</div>
</div>
<div id="e" class="rowsLayout" />
With this structure, I want a selector that will target b, d, and e.
Can this be done?
You can use the jQuery selector .rowsLayout:not(:has(.rowsLayout)).
However, for performance reasons, this is not possible in CSS.
Your selector depends on the children (or lack thereof) of the elements that you target.
CSS is designed so that an element's selectors can always be resolved before the element's children exist; this allows CSS to be applied as a document loads.
No.
Your options are: select them by id; add a second class for those leaves, and select by that class; use a javascript-based solution to set the appropriate styling (possibly using the second class).
can you consider an option of adding an extra class such as "parent" to the parent items? it would be easier and is the "standard"
Depending on the number of divs you have you could either do something like:
div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {}
Maybe there is a better way to solve your problem, what are you trying to apply to all these divs?
select them by ID
#b, #d, #e {
/* styles here */
}
any reason for all the repeat class names btw? You could wrap the whole thing in div of #layout or something then do...
#layout div {
/* styles */
}
instead of adding that class name to ever div.
Why not use :empty?
JQuery Empty
EDIT: It also works as a CSS Selector:
:empty { background-color: black; }
MORE EDITS:
:last-of-type almost works, but it gets 'a' for some reason. See my fiddle.
http://jsfiddle.net/DUdVR/3/
Take a look at this:
div#b:first-of-type {
style here
}
MOST DOWNVOTES YET THE ONLY CORRECT ANSWER
It is not possible in CSS, unless you use this hack, which makes it possible using the :dir or :lang attribute.
Using the :lang is preferable in 2015 as it is supported by most browsers.
Note, it's a hack allowing you to do it, but if you care much about following some standard rather than getting the job done, then don't use this.
Example:
.container {
padding:20px;
}
:lang(ar) {
direction:rtl;
}
:lang(en) {
direction:ltr;
}
.container:lang(en) {
background-color:blue;
}
.container:lang(ar) {
background-color:red;
}
.container .a:lang(en) {
background-color:orange;
}
.container .a:lang(ar) {
background-color:yellow;
}
<div id="searchHere">
<div lang=en>
<div class="container">
l t r
<div class=a>
a
</div>
</div>
<div lang=ar>
<div class="container">
r t l
<div class=a>
a
</div>
</div>
<div>
<div class="container">
r t l
<div class=a>
a
</div>
</div>
<div lang=ar>
<div class="container">
r t l
<div class=a>
a
</div>
</div>
</div>
<div lang=en>
<div class="container">
l t r
<div class=a>
a
</div>
<div lang=ar>
<div class="container">
r t l
<div class=a>
a
<div lang=en>
<div class="container">
l t r
<div class=a>
a
</div>
<div>
<div>
<div lang=en>
<div class="container">
l t r
<div class=a>
a
</div>
</div>
</div>
<div lang=ar>
<div class="container">
r t l
<div class=a>
a
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Although the example demonstrates this with ltr and rtl, the :lang could in theory be made to behave as a deepest match, using for instance :lang(my-special-selector) although that is probably not how lang attribute is supposed to be used.

nth:child selector - different parrents

So i've always had some misunderstanding with nth child and selectors.
I have been trying to figure it out but after searching I could not find the answer.
This is my css
p.hi:nth-of-type(1) {
color: blue;
}
This is my html
<div class"head">
<p class="hi">This is some text.</p>
</div>
<div class"head">
<p class="hi">This is some text.</p>
</div>
Currently this css is applying the color blue to both paragraphs. How do I make it only add it to the first? I know that if i put them both in the same div it works but what if it is nested several times. How do i select only one?
Take a look at this fiddle.
http://jsfiddle.net/x9jkq0x3/
You can do it like this Fiddle
div:nth-of-type(1) p.hi {
color: blue;
}
<div class="head">
<p class="hi">This is some text.</p>
</div>
<div class="head">
<p class="hi">This is some text.</p>
</div>
you can use first-child to class head instead class hi
this is the example Fiddle

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