selenium,selenium-webdriver,css-selectors,webdriver
Referring to the Is there a CSS parent selector? topic, there is no parent selector in CSS. Leave the "getting the parent" part to the XPath: WebElement we = dr.findElement(By.cssSelector("div[id='gf-BIG']")); WebElement parent = we.findElement(By.xpath("..")); ...
html,css,css-selectors,css-specificity
This is simply because there is no more specific rule for that <span> than what you have declared in .black. Even though it is a child element of the <p> that has an important! flagged rule, it only inherits the color from it if it can find no more specific...
My solution would be to create a function that manages adding removing classes to items based on their position and visibility, and call that function after each event that updates the items in some way. This way you can keep the items classes management separate from the code that updates...
Just apply like below. ul li:nth-child(4n) {clear:both;} DEMO...
css,html5,css3,css-selectors,document-body
To achieve this goal, add the following to your HTML: <body id="pagename"> and modify CSS correspondingly: body#pagename{ margin-top:20px; } If the same styling applies to many pages, you may use class instead of id: HTML <body class="pagename"> CSS body.pagename{ margin-top:20px; } Notice that the use of HTML body tag in...
javascript,jquery,css-selectors,queryselectorall
You can use .closest() to find the first ancestor mathcing the given selector element.parent('tr').parent('tbody').parent('table') -> $(element).parent('tr').closest('table') In the below case use find() with child selector element.children('tbody').children('tr').children('td') -> element.find('> tbody > tr > td') ...
What you are after is a CSS attribute selector, so your rule could be e.g: select{ /* everything with a size > 1 */ } select[size=1]{ /* everything with a size attribute === 1 */ } With that said, attribute selectors are part of the CSS3 module so not supported...
html,css,css-selectors,pseudo-class
The pseudo code that you wrote works! There's no last-child of <li> with no active class. So your code fails any time! Check with another one in which, the last <li> doesn't have an active. Or you need to use last-of-type. Check the fiddle: ol > li:not(.active):last-child > a {...
html,css,table,css-selectors,background-color
@svdh You've got tags outside of your body and html tags also which in a normal web page wouldn't be rendered. The problem with your HTML is you're setting up loads of tables instead of one with multiple rows. It should be like this. <table> <tr> <td>One</td> <td>One.</td> </tr> <tr>...
python,parsing,selenium,selenium-webdriver,css-selectors
Just let selenium know you don't want the element having ng-hide class with the help of not negation pseudo class: p.p1.transfer strong.ng-binding:not(.ng-hide) ...
Small mistake. Your second level ul are outside of li elements instead of inside. The problem is there in the following code. <li class="ion-navicon-round" id="menu"></li> <ul> <li><a href="#">knjižnica</a></li> <li><a href="#">zaloga</a> <ul> <li><a href="#">novi izvodi tiskanih revij</a></li> <li><a href="#">elektronske revije</a></li> <li><a href="#">katalog</a></li> <li><a...
No, it's not possible with CSS currently, read this. However, I guess you could do something like this JsFiddle instead. ul { list-style: none; padding: 0; width: 45px; text-align: center; position: relative; } li { background: silver; margin: 0 0 5px; } li:after { content:"\25be"; font-size: 2em; position: absolute; left:...
This is because browser automatically puts <tbody> element between table and tr while creating the DOM from HTML. Check DOM structure in Firebug (or similar tool) You can either remove > operator like: table.chess_board tr.chess_line { background-color: blue; } http://jsfiddle.net/nxvse1hd/8/ or add tbody > like: table.chess_board > tbody > tr.chess_line...
If it's native CSS I'm wondering, does it mean, "Having this id, AND this class, AND this class, etc."? Yes. This may clarify a bit: https://css-tricks.com/multiple-class-id-selectors/...
You can use the next sibling selector, like this: label { font-weight: bold; } label + label { font-weight: normal } Check the fiddle: https://jsfiddle.net/8cLuhznb/...
Here's working fiddle for you - jsFiddle - FYI : need to expand the result section enough for your menu items to align on a single row. PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends...
Just make your CSS .categories > .cat_link > .cat_link_container > a { font-weight:bold; } https://jsfiddle.net/gwjw0z9s/. You have to be quite specific to select the top-level text links you want. In this case we use the > sign to select a tags which are the immediate child of a .cat_link_container div,...
Try this: CSS: select{ color:red; } option{ color:black; } ...
The problem here is that the only thing separating your br elements is text. Sibling combinators in CSS ignore all non-element nodes between elements including (but not limited to) comments, text and whitespace, so as far as CSS is concerned, all of your paragraphs have exactly five consecutive br children...
html,css,css3,internet-explorer,css-selectors
Simply add :disabled before ::-ms-expand, like so: select:disabled::-ms-expand { background: #f60; } <select> <option>Enabled</option> </select> <select disabled> <option>Disabled</option> </select> ...
You can use :not() selector: table th:not(.sortable){ } ...
You can't do this with a CSS selector1 for a number of reasons: There is no parent selector, and There is no selector for matching the nth child satisfying an arbitrary selector. Your XPath is incorrect because a/ancestor::tr[position() = 2] returns the second tr ancestor of the a element. That...
Just subtract one from what you have to select the previous div: .positionDivs div:nth-child(3n-1){ background-color:red; } jsFiddle example...
You need to select the nth tr element rather than the child td element. Your selector should be: .UMLTable tr:nth-child(even) td { background-color:blue; } The reason your CSS isn't working as expected is because the td elements aren't siblings. .UMLTable tr:nth-child(even) td { background-color: blue; } <table class="UMLTable"> <tr> <th>Table...
I actually figured out a way to do this by posting the question: I can target every tr that follows a tr that does NOT have the class "field_value" tr:not(.vf__field_value) + tr.vf__field_value{ .. } Here is a fiddle of it (propably makes it a little more clear what I am...
'p a' will select all 'a' elements that are contained within a p element (descendents), even if they are not immediate children. 'p>a' will only select immediate children of p that are also 'a' elements. JSFIDDLE https://jsfiddle.net/seadonk/a9mfbbax/ HTML: <p> <a>CHILD A1</a> <span><a>DESCENDENT A2</a></span> <a>CHILD A3</a> </p> CSS: /* DESCENDENTS WILL...
instead of this .nav li > a:first-child { border-radius: 20px 0px 0px 0px; } use it .nav li:first-child > a { border-radius: 20px 0px 0px 0px; } ...
css,html5,date,input,css-selectors
The first element goes blue to indicate that it is the active element (in case you want to update the date using the keyboard), you can style it by specifying that it should not have a background using the pseudo-elements: ::-webkit-datetime-edit-month-field ::-webkit-datetime-edit-day-field ::-webkit-datetime-edit-year-field Notice: you should style not only the...
java,selenium,css-selectors,type-mismatch
There is a syntax problem with the contains keyword in your xpath. Following should work - driver.findElement(By.xpath("//a[contains(@href,'loginPage')]")).click(); Also, a better and easier way would be driver.findElement(By.className("loginBtn")).click(); ...
java,selenium,xpath,selenium-webdriver,css-selectors
Try //div[text()='Broker Code']/../..//input If that's the only input control I suggest you to use tagname with input...
You can use the comma operator like this: :nth-child(6n-2), /* 4, 10, 16, 22, ... */ :nth-child(6n-1), /* 5, 11, 17, 23, ... */ :nth-child(6n) /* 6, 12, 18, 24, ... */ ul { list-style: none; padding: 0; margin: 0; } li { display: inline-block; padding: 5px; } li:nth-child(6n-2), li:nth-child(6n-1),...
html,css,html5,css3,css-selectors
In second rule, add .row:first-child span also .row:first-child span, .row span { background: yellow; } https://jsfiddle.net/afelixj/z9mho7p5/2/...
This effect isn't the result of the child selector. What you are seeing is a result of property inheritance. The value of a property in CSS is defined by 3 rules: If the cascade (basically, this boils down to "what is defined by CSS files and your browser") explicitly specifies...
javascript,css-selectors,web-scraping,phantomjs,spookyjs
This is very likely related to a bug in PhantomJS 1.x which doesn't correctly find elements based on CSS selectors that use :nth-child(). See this question for more information. Since CasperJS supports XPath expressions for almost all of its functions, you can translate the CSS selector to an XPath expression:...
javascript,css-selectors,casperjs
Your selectors look fine. There are multiple things that might have happened... Waiting The site is not fully loaded (dynamic site/SPA) which means that you're trying to access those elements too early. You could for example wait for the first elements to appear and then access all of them: casper.waitFor(function...
The parent selector cannot be used that way, it only contains a reference to the previous selector. Sass has no way of targeting the contents of an attribute selector (at least, not outside of whatever string manipulation functions are currently available). The best you can do is either write a...
python,html,css-selectors,beautifulsoup,html-parsing
To specify multiple classes in a CSS selector, join them with dots: soup.select("table.drug-table.data-table.table.table-condensed.table-bordered") Demo: >>> from bs4 import BeautifulSoup >>> >>> data = """ ... <table class="drug-table data-table table table-condensed table-bordered"> ... <tr> ... <td>test</td> ... </tr> ... </table> ... """ >>> >>> soup = BeautifulSoup(data) >>> for i in...
nth child, as explained here selects based on elements that are the nth child of their parents. so 1 is working, because the first stroke is the first child. 3 works because the second stroke is the third child. 2 won't work, because there are no strokes that are 2nd...
You cannot do that with CSS but You can try using jQuery, see the fiddle :https://jsfiddle.net/nileshmahaja/4ghws6wz/3/ $(".innerDiv").mouseover(function(){ $(this).parent().siblings().css('opacity', 1); }); $(".innerDiv").mouseout(function(){ $(this).parent().siblings().css('opacity', 0); }); Or $(".innerDiv").mouseover(function(){ $(".otherDiv").css('opacity', 1); }); $(".innerDiv").mouseout(function(){ $(".otherDiv").css('opacity', 0); }); CSS Selector Documentation : http://www.w3.org/TR/css3-selectors/#selectors,...
html,css,hyperlink,css-selectors,hover
You do this by specifying :hover on the parent instead of each child: .pf_link_1:hover .pf_img_1 { opacity:0.6; } .pf_link_1:hover .pf_title { opacity:1; color:red; } These are still two separate CSS rules with their own declarations, but hovering over the parent will correctly activate both rules simultaneously....
css,jquery-selectors,css-selectors
One way is to loop over the divs and keep track whether you've already seen a div with that data attribute var jobs = []; $('section.careers div').each(function () { if ($.inArray($(this).data('state'), jobs) === -1) { // an element with this data attribute hasn't been encountered yet jobs.push($(this).data('state')); // Add the...
Unless your markup is literally: <... class="sidemal"> <h1>Heading 1</h1> <h1>Heading 2</h1> ... </...> ...with no elements in between, your second h1 element will not be the second child. If you want to select the second h1 element, you can instead use the :nth-of-type selector: .sidemal h1:nth-of-type(2) { ... } Update...
To specifically target the list items in Specials widget, use this: .specials-home ul.post-list li { background: #000; } ...
This is a very un-performant selector, but actually the performance impact is negligible. That is, of course without using properties like box shadows, animation on the universal selector. That will actually slow down the site as well. So, if you know what you're doing, you can use the universal selector,...
Here you go: [attr*=-value-], [attr$=-value], [attr=value] In pseudo code: Get those containing -value-, those ending with -value, and those exactly equal to value. ...
html,css,css3,css-selectors,css-specificity
The rule with the blue is more specific and that is why it takes precedence. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...
css,css-selectors,pseudo-element
First, ul elements can't have an alt attribute. You can use custom data-* attributes instead. And it doesn't make much sense to repeat the same data in each ul. Instead, add it only to the div. Then, you can use div:not(:empty):before { content: attr(data-alt); display: block; } div:not(:empty):before { content:...
java,selenium,selenium-webdriver,css-selectors
You need to enclose 2h into quotes (explanation): h3[headerindex="2h"] And, xpath locator is always an alternative: By.xpath("//h3[@headerindex='2h']") ...
It is indeed an attribute selector. An attribute selector and a class selector are both simple selectors, and simple selectors in a sequence may be arranged in any order, with the exception that a type or universal selector, if present, must come first. This means [ui-view].ng-enter-active and .ng-enter-active[ui-view] are both...
Use this simple CSS: div.clsname:first-child, div.clsname:last-child{ display:none; } FIDDLE: https://jsfiddle.net/lmgonzalves/aLaw2qj5/...
Usually, the way my CSS looks is with increasing specificity. A very generic rule sets a whole lot of defaults, and then something that positively matches one of those rules you gave us overrides that style with something else. For instance, you could set a higher-priority rule for anything ending...
javascript,dom,css-selectors,getelementsbytagname,queryselectorall
Consider using mutation observers. Watch for childList with subtree: true. When the notification arrives, you can examine each added node with matches to see if it matches some selector. function querySelectorAllLive(element, selector) { // Initialize results with current nodes. var result = Array.prototype.slice.call(element.querySelectorAll(selector)); // Create observer instance. var observer =...
Yes, you can. You must write the name of variable inside the braces: #{$yourVariable} @mixin pseudoawesome($fa-symbol, $pseudo) { &#{$pseudo} { content: $fa-symbol; font-family: FontAwesome; } } EDIT: you can find this information here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_ Just search with chrome: "If you want to use" The section didn't have the anchor tags....
You have an error in the syntax when you use .checked. . is a class selector. What you are aiming for should be with a colon #menuToggle:checked ~ .menu { position:absolute; left:0; } See it corrected...
css,css3,css-selectors,less,extend
Answer to your Less question would be - Yes, it is possible in Less. You can assign your selector to a variable and then use it via selector interpolation. Below is an example: #left{ background-color: red; &:not(:empty){ font-size: 20px; background-color: green; } } #right{ font-size: 15px; @{left-empty} + &{ /*...
You can use xpath union operator (|) to combine multiple xpath expressions, f.e one to handle the case when tbody exists, and another for the case when tbody doesn't exist : //table[@id='Main']/tbody/tr | //table[@id='Main']/tr ...
java,selenium,selenium-webdriver,css-selectors
CssSelector with contains text does not work in scripting but it works in selenium IDE. One more is, its not good to work on sites like gmail.. you can learn by using components in http://seleniumtrainer.com/. its good for start up. thank you...
The above are the same. The quotes are optional for identifiers, but must be used when it is a string. Some common examples of being a string include: Containing a space () Beginning with a digit (0-9) Containing a hyphen after a digit Here's the full spec of an identifier:...
Classes can't have spaces, what you have there is an element with two separate classes on it. To select an element with two classes, you use a compound class selector: document.querySelector(".PrmryBtnMed.ApricotWheat"); That selects the first element in the document that has both the PrmryBtnMed class and the ApricotWheat class. Note...
before CSS-3 people often used background-position along with a image-sprite so you could use the old-horse background-position , like so : .willReactOnHover.class1{ background: url('../images/image1.png');} .willReactOnHover.class2{ background: url('../images/image2.png');} .willReactOnHover:hover{ background-position:-10px; } ...
You could use combination of :not() pseudo-class and direct descendant combinator >: :not(#k):not(#no) > span { /* Match all spans that are NOT children of */ display:block; /* elements having IDs #k and #no */ font-size:20px; } It's worth noting that :not() is supported in IE9+. :not(#k):not(#no) > span {...
In both languages, & only holds a reference to an entire complex selector, with the option to extend the selector provided that you use the entire thing as a base: .one > .two { &::after, &::before { // Compiles to .one > .two::after, .one > .two::before } & + .three...
You can select the child by .search-wrapper > ul > li:last-child hr{ you can also use .search-wrapper > ul > li:last-child > hr{ ...
javascript,css-selectors,phantomjs,karma-jasmine
You can use the :not() selector: expect(element.find('input:not([style="display:none"])').length).toBe(10); The problem seems to be, that you need to match elements according to the DOM and not their computed styles. So the above suggestion works only as long as the elements that you don't want to count actually contain the exact string "display:none"...
You can use the :not: CSS: div:not([class]):not([id]) { height: 200px; width: 200px; background-color: red; } HTML: <div></div> <div class="shikaka"></div> <div id="shikaka2"></div> http://jsfiddle.net/qcq0qedj/...
The problem is that you are referring to all .rowX children of the .embedded.minisized. To access only the container's direct children, use the following: .embedded.minisized>.container>.row1 { display: block;} .embedded.minisized>.container>.row2 { display: none;} .embedded.minisized>.container>.row3 { display: none;} .embedded.minisized>.container>.row4 { display: none;} ...
The universal selector * has no specificity value. Essentially anything and everything takes precedence over it. Via MDN: The following list of selector types is by increasing specificity: Universal selectors (e.g., *) Type selectors (e.g., h1) Class selectors (e.g., .example) Attributes selectors (e.g., [type="radio"]) Pseudo-classes (e.g., :hover) ID selectors (e.g.,...
css,css3,firefox,css-selectors,identifier
Standard Effectively, a change in CSS Syntax Module now allows identifiers to start with two hyphens: 4.3.9. Check if three code points would start an identifier Look at the first code point: U+002D HYPHEN-MINUS If the second code point is a name-start code point or a U+002D HYPHEN-MINUS, or the...
Try header ul li:first-child a {}
css,html5,css3,attributes,css-selectors
The reason is because you do have a li that is not .menu-class-2: <ul class="nav-menu" id="menu-main-navigation"> <li class="menu-class"> <a href="#12">Nav 1</a> <ul class="sub-menu"> <li class="menu-class-3"> <!-- THIS ONE HERE --> <a href="#12">Nav 2</a> <ul class="sub-menu"> <li class="menu-class-2"><a href="#2">Anchor, it should be lowercase</a></li> </ul> </li> </ul> </li> </ul> Since your css...
html,css,wordpress,css3,css-selectors
As each a is within it's own li tag, you can't target them with this selector, however, you can apply it on li itself: li:first-child{<...>}.
jquery,html,css,jquery-selectors,css-selectors
If you will see this JSPERF test then you will see that .find() is definitely the better and faster way. Actually .find() will select all the matching descendant elements(ie, child, child of child and so on...) whereas > is a direct child selector(ie, it will fetch the direct child)....
Your problem is the selector: .menu li:hover ~ .menu li A hidden element can't be hovered-over, which means that li:hover is never going to match an element. Also, the general-sibling combinator is trying to find (subsequent) siblings that are <li> elements descending from sibling .menu elements. Which matches no elements...
You can do it like this: .parent .child:nth-child(n+5){ display: none; } ...
css,css-selectors,icons,pseudo-element
As you can see from the other answers, there are multiple solutions! If the size of the square in :before is always the same, one other solution would be to add .link {margin-left:25px; text-indent:-25px;} to the CSS. This causes the entire block to be shifted to the right, except for...
section div~div div#item ul { background: #ff0000; } You need to select the parent div if it has a sibling. I'm not sure what your original selector was doing, but it was wrong. Snippet with: section div~div div#item ul { background: #ff0000; } <section> <div id="sibling1">xxx</div> <div> <div id="item"> <ul>...
selenium,css-selectors,webdriver
The ID in your case contains a colon, which is a special character in CSS selectors (used to denote a pseudo-class or a pseudo-element). The selector is thus being treated as input, #j_idt74 and :addNewTypeBtn, which is of course incorrect. You can use an ID selector, but you need to...
ul a { font-size: 1.25rem } This is the best if you want to capture every anchor tag or any tag inside ul/ol tag But performance wise, ul { font-size: 1.25rem } this will be best. But if you want to modify the tag's built in css property, like anchor's...
javascript,css-selectors,casperjs
clientutils.exists() expects a CSS selector as an argument. It seems you want to determine whether the input element exists based both of its class attributes. 'image selectIcon' is not how you select elements based on the class attribute. A proper CSS selector is this one in that case: '.image.selectIcon' An...
ruby-on-rails,rspec,css-selectors,click,rspec-rails
You've only got a single a tag in your Haml example, so I'm guessing your example is incomplete. If you want to retrieve a link by it's href value you could try this: find(:xpath, "//a[@href='/admin/export/users']").click ...
The html elements: abbr: The HTML Abbreviation element () represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else. abbr[title] { color: red; } <p>I do <abbr title="Hypertext Markup Language">HTML</abbr> </p> acronym The HTML Acronym Element...
html,css,css-selectors,siblings
DEMO styles can be applied to the children nodes based on the number of siblings they have. html <ul> <li>one item</li> </ul> <ul> <li>two items</li> <li>two items</li> </ul> <ul> <li>three items</li> <li>three items</li> <li>three items</li> </ul> <ul> <li>four items</li> <li>four items</li> <li>four items</li> <li>four items</li> </ul> css li:first-child:nth-last-child(1) {...
you can target it using .inner:nth-last-child(2) { color: red; } fiddle...
ruby,css-selectors,nokogiri,mechanize
The page you are searching doesn’t contain any tbody tags. When your browser parses the page it adds the missing tbody elements into the DOM that it creates. This means that when you examine the page through the browser’s inspector and console it acts like the tbody tags exist. Nokogiri...
Because CSS selectors can only traverse from an earlier element to a later sibling, descendant or descendant of a sibling (and cannot select parent, or previous-sibling, elements), this cannot be done with CSS. As hovering the <a> to style the later :target-ed elements would first require traversing to the parent...
use: .footer-widgets .row div:nth-child(2) { display:none } working example We apply ":nth-child" to the actual child element, not the parent element (though this was a "gothcha" for me the first time I ran across it too.)...
You can make the h1 change color on hover, while keeping the span inside the h1 black. h1:hover { color: red; } h1:hover span { color: black; } <h1>{ <span>js</span> }</h1> ...
css,css3,css-selectors,pseudo-class
Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } jsBin demo Another example; I think you want to: "when one is hovered, dim all other elements". If my assumption is correct, and assuming all your selectors are inside the same parent: .parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{...
You can use :nth-child instead of :nth-of-type .aside_box_content { height: 130px; overflow: hidden; } .aside_box:nth-child(3) .aside_box_content { background-color: purple; } <aside> <div id="aside_caption">INFO</div> <!-- NEW BOX --> <div class="aside_box"> <div class="aside_box_content"></div> <div class="footer_of_box_aside">YOUTUBE</div> </div> <!-- NEW BOX --> <div class="aside_box"> <div class="aside_box_content"></div> <div...
As a literal translation, I would try //*[contains(@class, 'forum-table')]//tr[1]//*[contains(@class, 'forum-number-topics')] Note that this will select both <td> and <div> elements, e.g. where you have <td class="forum-number-topics"> <div class="forum-number-topics"> in the input. Also note that this assumes you don't have "ornery" classes that contain forum-table but not as a whole class...
Use the nth-child in css span{ font-size: 30px; display: block; } label span{ color: blue; } label span:nth-child(2){ color: red; } <label for="modalProblemLocator"> <span>Locator</span> <span>xxx</span> </label> <br><br><br><br> <label for="modalProblemLocator"> <span>Locator</span> </label> <br><br><br><br> <label for="modalProblemLocator"> <span>Locator</span> <span>second</span>...