Need to target each element that has specific class starting with depth-
I tried targeting with CSS:
[class^="depth-"] {
margin-left: 40px;
}
but it works only when targeted class is the first in classes order.
In my case:
<div class="comment byuser comment-author-admin odd alt depth-2 parent" id="comment-13">
<div id="div-comment-13" class="media">
...
</div>
<div class="comment byuser comment-author-admin even depth-3" id="comment-14">
<div id="div-comment-14" class="media">
...
</div>
</div>
</div>
The CSS [attribute^="value"] Selector will only work when the entire style attribute value starts with given value. If you want to use this selector, then you will have to move the depth-2 and depth-3 classes at the beginning of the attribute as below -
<div class="depth-2 comment byuser comment-author-admin odd alt parent" id="comment-13">
<div id="div-comment-13" class="media">
TXT HERE
</div>
<div class="depth-3 comment byuser comment-author-admin even" id="comment-14">
<div id="div-comment-14" class="media">
MORE HERE
</div>
</div>
</div>
It would not be a good idea to do this. Instead of this, you can use CSS [attribute*="value"] Selector which searches for given value throughout the attribute. So, your css code will look like this without changing the html -
div[class*="depth-"]{
margin-left: 40px;
}
Related
I'm trying to match element that dose not match given selector using css.
Given the markup below, I'm trying to select only the first ".color"
<div uid="unique-id-1">
<div> <div class="color"></div> </div>
<div uid="unique-id-2">
<div class="color"></div>
</div>
</div>
I tried [uid="unique-id-1"] .color:not([uid="unique-id-1"] [uid] .color) which did not work obviously, but I think it will help to understand what I am looking for.
Thanks in advance!
If you're only going to apply the selector to this limited combination of elements (i.e. there aren't any other .colors in the page that could potentially be affected by this), then
[uid="unique-id-1"] > div:not([uid]) > .color
Do consider renaming the attribute to data-uid if your application allows, so as to make it clearer that this is an app-specific and non-standard uid attribute.
That seems simple:
[uid="unique-id-1"]>:first-child .color {
color: red;
}
<div uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
That being said, uid as an attribute name makes your HTML invalid, so you should rename that to data-uid:
[data-uid="unique-id-1"]>:first-child .color {
color: red;
}
<div data-uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div data-uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
I have an html structure defined like this:
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
...
</div>
</div>
What I would like to be able to do is use the "container" style to recursively go through its children and locate the first instance of type <img/> and force a display:none;. Kind of like this (non-working css):
.container {
width: 100%;
> img:first-of-type {
display: none;
}
}
From what I understand the 'first-of-type' selector only works at the sibling level, however for reasons I am only able to operate at the "container" level - so is there a way to recursively select the first instance of an image from the styling at the great-grandfather level?
On my own understanding, ">" selector selects the elements that is first descendant of an element. Like for example div > img, this one selects all the img that are first descendant of the div and not the img that is on its second successor.
So, if I didn't misunderstood your question, what you are trying to accomplish is to find the very first img inside the .container class by using the :first-of-type selector. If we base on the structure of your elements, it will never happen. This is because you are using ">" selector but there are no direct descendants of img inside since images are being wrapped inside .photoWrapper class. And if you use div img:first-of-type, this will select all the first instance of image inside the div as well as in its successors.
Sadly, I think there's still no feature/selector on CSS that can find elements to all its successor in accordance to your question. You can read about selectors here:
https://www.w3schools.com/cssref/css_selectors.asp /
https://www.w3schools.com/cssref/css_selectors.asp
Hmm I don't know if you prefer this, but here's my workaround for your question. I will use find('img:first') function of jquery.
Hope this will help you.
$(document).ready(function(){
$('.container').find('img:first').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" alt="1" />
</div>
<div class=photoWrapper>
<img class="image" alt="2" />
</div>
<div class=photoWrapper>
<img class="image" alt="3" />
</div>
...
</div>
</div>
What about:
.container .photoWrapper:first-child img {
display:none;
}
<div id='test' /><div>
In the above example, I need to find div under below scenario:
WebElement
divelement = driver.FindElement(By.css("#test"));
Now I want to find the div tag with no attribute using the divelement variable.
How to navigate to div descendant using divelement?
There are a couple ways you can do this.
By using a CSS Selector:
driver.findElement(By.cssSelector("#test div"))
// ^ note the space. this is CSS for "descendant".
I'm confused by the phrasing of
find the div tag with no attribute using the divelement variable.
but if you mean a <div> element with no specific attributes, then you can use the :not() pseudo-selector.
driver.findElement(By.cssSelector("#test div:not([id])")
// will find all <div>s that are descendants of #test that do not have an id attribute.
The other way, is to just use chained findElement's like so:
driver.findElement(By.cssSelector("#test")).findElements("div")
divelement.findElement(By.css("div"));
That should be the way to go. That was listed in the comment above from #Sudharsan Selvaraj
If you know the use of double slash // in Xpath and looking for its counterpart in CSS, then you need to use space.
For example: You want CSS for grey line then it will be .image .row.width-for-gray-line
<div class="image parbase wq-GridColumn wq-GridColumn--default--12">
<div class="component">
<div class="row bottom-buffer">
<div class="col-sm-12">
<a href="https://msn.com" target="_blank">
<picture>
<img src="/image/path/cover.jpg"
class="image-max-width-responsive" alt="test_alt_text">
</picture>
</a>
<p class="light-txt">test_caption</p>
</div>
</div>
<div class="row width-for-gray-line">
<hr class="bottom-buffer-gray-line">
</div>
</div>
</div>
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.