Menu
  • HOME
  • TAGS

CSS Selector-How to locate Parent Element

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("..")); ...

!important overriden by a class of child element

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

How can I target only visible objects with nth-child?

jquery,css,css-selectors

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

:nth-child(3n):after cleafix not working in CSS

css,css-selectors,clearfix

Just apply like below. ul li:nth-child(4n) {clear:both;} DEMO...

CSS Selector applied to HTML Page body element

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

Element-relative CSS selectors

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') ...

CSS - Differentiate between drop down select and list box select

html,css,css-selectors

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

CSS Pseudo Class Selection not working

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

Alternate table row color using CSS, individual cells get colored not the even rows

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

Find element by class name

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

Selecting nested lists

html,css,css-selectors

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

How to select parents sibling with CSS?

css,css3,css-selectors

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

Wrong css “>” selectors (by me) [duplicate]

css,css-selectors

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

SASS vs. CSS attributes including concatenated classes

css,sass,css-selectors

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

CSS selector to bold only labels without child elements

html,css,css-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/...

CSS after selector in nav

css,css-selectors

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

set first a-tag on bold with css

css,css-selectors,bold

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

Change the 'option' color with the attribute 'disabled'

css,css-selectors

Try this: CSS: select{ color:red; } option{ color:black; } ...

Selecting one of elements in a pair by pure CSS

html,css,css-selectors

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

Style select::-ms-expand when disabled

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

CSS pattern that matches when style is NOT present

html,css,css-selectors

You can use :not() selector: table th:not(.sortable){ } ...

A CSS selector or xpath to iterate over rows with specific attributes

html,xpath,css-selectors

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

How can I style only certain columns in a div? [duplicate]

html,css,css-selectors

Just subtract one from what you have to select the previous div: .positionDivs div:nth-child(3n-1){ background-color:red; } jsFiddle example...

CSS nth-child does not work

css,css-selectors

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

“multi level” adjacent sibling selector

css,css-selectors

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

CSS - Understanding child selectors [duplicate]

css,css-selectors

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

Styling ul with first-child

css,css-selectors,html-lists

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

how to style html5 date input, first element focus/active

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

Difficulty clicking an anchor tag using href as locator

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(); ...

Entering text into texbox after label

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

How do I apply a style to every nth set of size m?

css,css-selectors

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),...

Regarding the :nth-child and :nth-of-type selectors

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

Understanding the CSS child selector >

html,css-selectors

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

CasperJS/SpookyJS css selector is existing and not-existing

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

Count DOM elements with CasperJS' evaluate failed

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

How can I add additional information to an attribute selector via nesting in Sass?

css,sass,css-selectors

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

How to match a particular tag through css selectors where the class attribute contains spaces?

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() selector working only on select few elements [duplicate]

css,css-selectors

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

hover div to show another div

html,css,css-selectors

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

Can I activate all child hover states at the same time?

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

Select the first-of-type div in a list that all have a data-attribute for the state it's associated with

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

h1 - Select second won't work

css,css-selectors

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

How to Find CSS Selector

css,css-selectors

To specifically target the list items in Specials widget, use this: .specials-home ul.post-list li { background: #000; } ...

Does * selector affect performance seriously?

css,performance,css-selectors

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

CSS selector to choose second item after a hyphen

css,css-selectors

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

:nth-of-type selector overrides all other CSS selectors

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 - parent :before pseudoelement with child alt attribute as content

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

showing exception when selecting the cssselection in selenium

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']") ...

What CSS selector is this? [ui-view].ng-enter-active

css,css3,css-selectors

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

how to hide first and last element from the three same element

html,css,css-selectors

Use this simple CSS: div.clsname:first-child, div.clsname:last-child{ display:none; } FIDDLE: https://jsfiddle.net/lmgonzalves/aLaw2qj5/...

css :not() selector with selector list incoming

javascript,css,css-selectors

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

Is it possible to make querySelectorAll live like getElementsByTagName?

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

Pass pseudo element selector as variable in SASS [duplicate]

css,sass,css-selectors

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

Css sibling (~) selector not working on checked property

css,html5,css3,css-selectors

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

Defining selectors to apply to the other styles

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} + &{ /*...

How to get all direct(immediate) rows from WebElement Table

selenium,xpath,css-selectors

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

CSS Locator with contains() InvalidSelectorException using Selenium WebDriver

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 difference between quoted and unquoted attribute selector in CSS

css,performance,css-selectors

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

How can I use document.querySelector to select this class name with a space in it?

javascript,html,css-selectors

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

Is it possible to add text to every image path on hover using CSS?

css,css-selectors

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

Set changed properties to spans

html,css,css-selectors

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

Specify an attribute value using the parent selector in LESS/SCSS?

sass,css-selectors,less

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

How to hide hr inside the last li using css

html,css,css-selectors

You can select the child by .search-wrapper > ul > li:last-child hr{ you can also use .search-wrapper > ul > li:last-child > hr{ ...

find element by css property that is not explicitly set

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

Select the only Element with no class or ID

html,css,css-selectors

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

How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

css,css-selectors

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

Overriding CSS Reset with the Univeral Selector

css,css-selectors,css-reset

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

Can CSS identifiers begin with two hyphens?

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

Selecting first-child anchor element in an ul [duplicate]

html,css,css-selectors

Try header ul li:first-child a {}

CSS :not() with [attribute*=value] selector not works properly

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

CSS last-child not working in menu

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

CSS or jQuery selctor? [closed]

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

How to show all siblings on :hover in pure CSS

html,css,css-selectors

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

Looking for a css selector that selects all childs after nth child

css,css-selectors

You can do it like this: .parent .child:nth-child(n+5){ display: none; } ...

Make text not wrap around icon in :before pseudoelement?

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

Partial grouping of a CSS selector

css,css-selectors

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

Why can't I use the standard CSS annotation using the '#' symbol to grab elements with IDs on Selenium Webdriver, using the @FindBy annotation?

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

Which of the two following selectors are better? [closed]

css,performance,css-selectors

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

How to determine if a specific input exists using CasperJS

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

How to select 3rd 'a' tag in a list for RSpec test?

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

What this abbr and acronym selectors address?

css,css-selectors

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

Setting different margin to the li first child based on the number of list elements [duplicate]

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) {...

Select a class using CSS based on whether or not it has any siblings that share the same class

html,css,css-selectors

you can target it using .inner:nth-last-child(2) { color: red; } fiddle...

Mechanize search unable to find CSS selector (it's definitely present)

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

:target behaviour but on :hover in CSS

css,css3,css-selectors

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

Selector for the 2nd child of a child dvi

css,css-selectors

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

Make hovering over a parent element only affect its own text, not child elements

html,css,css-selectors

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

Is there an opposite CSS pseudo-class to :hover?

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

Cannot change style with :nth-of-type(n)

html,css3,css-selectors

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

Xpath targeting starting from CSS

html,xpath,css-selectors

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

Is there a way I can specify the second inside an element?

html,css,css-selectors

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