CSS nth-child does not work
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...
Understanding the CSS child selector >
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...
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....
Xpath targeting starting from CSS
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...
Looking for a css selector that selects all childs after nth child
You can do it like this: .parent .child:nth-child(n+5){ display: none; } ...
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>...
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...
CSS after selector in nav
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...
: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...
Partial grouping of a CSS selector
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>...
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...
Overriding CSS Reset with the Univeral Selector
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 :not() selector with selector list incoming
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...
Can I select css parent element? [duplicate]
There is currently no parent selector in CSS.
Select the only Element with no class or ID
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 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 ...
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...
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...
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} + &{ /*...
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> ...
How to select parents sibling with CSS?
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:...
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) ...
Styling ul with first-child
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; } ...
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...
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) {...
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...
How can I style only certain columns in a div? [duplicate]
Just subtract one from what you have to select the previous div: .positionDivs div:nth-child(3n-1){ background-color:red; } jsFiddle example...
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 {...
nth-child() selector working only on select few elements [duplicate]
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...
CSS pattern that matches when style is NOT present
You can use :not() selector: table th:not(.sortable){ } ...
How to Find CSS Selector
To specifically target the list items in Specials widget, use this: .specials-home ul.post-list li { background: #000; } ...
How to show all siblings on :hover in pure CSS
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...
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...
How can I add additional information to an attribute selector via nesting in Sass?
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...
Set changed properties to spans
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 {...
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/...
how to hide first and last element from the three same element
Use this simple CSS: div.clsname:first-child, div.clsname:last-child{ display:none; } FIDDLE: https://jsfiddle.net/lmgonzalves/aLaw2qj5/...
set first a-tag on bold with css
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,...
Select a class using CSS based on whether or not it has any siblings that share the same class
you can target it using .inner:nth-last-child(2) { color: red; } fiddle...
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...
Selecting one of elements in a pair by pure CSS
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...
Cannot change style with :nth-of-type(n)
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...
What this abbr and acronym selectors address?
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...
CSS selector to bold only labels without child elements
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/...
How to hide hr inside the last li using css
You can select the child by .search-wrapper > ul > li:last-child hr{ you can also use .search-wrapper > ul > li:last-child > hr{ ...
Make hovering over a parent element only affect its own text, not child elements
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> ...
:nth-child(3n):after cleafix not working in CSS
Just apply like below. ul li:nth-child(4n) {clear:both;} DEMO...
:target behaviour but on :hover in CSS
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...
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:...
LESS CSS - Mixin Arguments and Nth-Child - without looping
css,css-selectors,arguments,less,less-mixins
I was finally able to find this solution with the help of a brilliant individual name seven-phases-max who helped me with my prior problem. My Solution .coordinates(-2, 2); .coordinates(@min, @max) { .xcoor; .xcoor(@xcoor: @min) when (@xcoor <= @max) { .ycoor; .xcoor(@xcoor + 1); } .ycoor(@ycoor: @min) when (@ycoor <= @max)...
How do I apply a style to every nth set of size m?
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),...
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"...
CSS selector to choose second item after a hyphen
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. ...
Is there a way I can specify the second inside an element?
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>...
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 - Differentiate between drop down select and list box select
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 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)....
Selector for the 2nd child of a child dvi
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.)...
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...
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...
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...
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:...
h1 - Select second won't work
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...
Which of the two following selectors are better? [closed]
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...
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']") ...
Css sibling (~) selector not working on checked property
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...
Proper CSS syntax for assigning style attributes to a pseudo-class for multiple classes'?
css,css-selectors,placeholder,pseudo-class
Unfortunately, without making use of a preprocessor (since this is CSS), the best you can do is to group each set of vendor prefixes for both .red-va and .blue-va, but not all of them into a single ruleset: .red-va::-webkit-input-placeholder, .blue-va::-webkit-input-placeholder { color: white; } .red-va:-moz-placeholder, .blue-va:-moz-placeholder { /* Firefox 18-...
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(); ...
Wrong css “>” selectors (by me) [duplicate]
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...
How can I use document.querySelector to select this class name with a space in it?
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...
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 get all direct(immediate) rows from WebElement Table
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 ...
Specify an attribute value using the parent selector in LESS/SCSS?
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...
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("..")); ...
hover div to show another div
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,...
What CSS selector is this? [ui-view].ng-enter-active
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...
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...
Does * selector affect performance seriously?
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,...
How can I target only visible objects with nth-child?
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...
How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS
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 difference between quoted and unquoted attribute selector in CSS
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:...
Selecting first-child anchor element in an ul [duplicate]
Try header ul li:first-child a {}
CSS - Understanding child selectors [duplicate]
'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...
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 =...
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') ...
A CSS selector or xpath to iterate over rows with specific attributes
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...
!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...
Is it possible to add text to every image path on hover using CSS?
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; } ...
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{...
Pass pseudo element selector as variable in SASS [duplicate]
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....
Selecting nested lists
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...
SASS vs. CSS attributes including concatenated classes
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/...
“multi level” adjacent sibling selector
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...
Change the 'option' color with the attribute 'disabled'
Try this: CSS: select{ color:red; } option{ color:black; } ...