Posts

Showing posts with the label Css Selectors

Css :first-of-type Example

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. /* Selects any <p> that is the first element of its type among its siblings */ p:first-of-type { color : red ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :first-of-type Examples Styling the first paragraph HTML < h2 > Heading </ h2 > < p > Paragraph 1 </ p > < p > Paragraph 2 </ p > CSS p:first-of-type { color : red ; font-style : italic ; } Result Nested elements This example shows how nested elements can also be targeted. Note that the universal selector ( * ) is implied when no simple selector is written. HTML < article > < div > This `div` is first! </ div > < div > This < span > nested `span` is first </ span > ! </ div > < div > This < em > ...
Post a Comment
Read more

CSS Selector For Child Of Parent's Sibling Element

Answer : In a word: no. Given the current structure of your HTML (and the current state of CSS selectors), this is not possible. Perhaps we will get something like this in CSS4, but traversal like this is best left up to Javascript. You can obviously restructure your markup, and use the sibling selector: HTML <div class="parent"> <a href="#" id="trigger">Trigger</a> <div class="sibling"> <div id="change">Hello</div> </div> </div> CSS #trigger:hover + .sibling #change { color:red; } codepen No. You cannot achieve this using CSS only. Javascript is a good option in this case.. You can however detect the .parent being hovered (which will solve your problem if the parent surrounds exactly the trigger): .parent:hover + .sibling div#change{background:red;} (markup stays the same jsFiddle)
Post a Comment
Read more

CSS Selector-How To Locate Parent Element

Answer : 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(".."));
Post a Comment
Read more

Css :root Example

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html , except that its specificity is higher. /* Selects the root element of the document: <html> in the case of HTML */ :root { background : yellow ; } Syntax :root Examples Declaring global CSS variables :root can be useful for declaring global CSS variables: :root { --main-color : hotpink ; --pane-padding : 5px 42px ; } Specifications Specification Status Comment Selectors Level 4 The definition of ':root' in that specification. Working Draft No change. Selectors Level 3 The definition of ':root' in that specification. Recommendation Initial definition. Browser compatibility Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet :root 1 12 1 ...
Post a Comment
Read more

CSS Selectors Ul Li A {...} Vs Ul > Li > A {...}

Answer : " > " is the child selector " " is the descendant selector The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum . A child element is simply one that is directly contained within the parent element: <foo> <!-- parent --> <bar> <!-- child of foo, descendant of foo --> <baz> <!-- descendant of foo --> </baz> </bar> </foo> for this example, foo * would match <bar> and <baz> , whereas foo > * would only match <bar> . As for your second question: Which one is more efficient and why? I'm not actually going to answer this question as it's completely irrelevant to development. CSS rendering engines are so fast that there is almost never* a reason to optimize CSS selectors beyond making them as short as possible. Instead of worrying about micro-optimizations, focus o...
Post a Comment
Read more

Css :defined Example

The :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method). /* Selects any defined element */ :defined { font-style : italic ; } /* Selects any instance of a specific custom element */ simple-custom:defined { display : block ; } Syntax :defined Examples Hiding elements until they are defined The following snippets are taken from our defined-pseudo-class demo ( see it live also). In this demo we define a very simple trivial custom element: customElements . define ( 'simple-custom' , class extends HTMLElement { constructor ( ) { super ( ) ; let divElem = document . createElement ( 'div' ) ; divElem . textContent = this . getAttribute ( 'text' ) ; let shadowRoot = this . attachShadow ( { mode : 'open' } ) . app...
Post a Comment
Read more

CSS Selector (id Contains Part Of Text)

Answer : Try this: a[id*='Some:Same'][id$='name'] This will get you all a elements with id containing Some:Same and have the id ending in name <div id='element_123_wrapper_text'>My sample DIV</div> The Operator ^ - Match elements that starts with given value div[id^="element_123"] { } The Operator $ - Match elements that ends with given value div[id$="wrapper_text"] { } The Operator * - Match elements that have an attribute containing a given value div[id*="wrapper_text"] { } The only selector I see is a[id$="name"] (all links with id finishing by "name") but it's not as restrictive as it should.
Post a Comment
Read more

Css :last-child Example

The :last-child CSS pseudo-class represents the last element among a group of sibling elements. /* Selects any <p> that is the last element among its siblings */ p:last-child { color : lime ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :last-child Examples Basic example HTML < div > < p > This text isn't selected. </ p > < p > This text is selected! </ p > </ div > < div > < p > This text isn't selected. </ p > < h2 > This text isn't selected: it's not a `p`. </ h2 > </ div > CSS p:last-child { color : lime ; background-color : black ; padding : 5px ; } Result Styling a list HTML < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 3 < ul > < li > Item 3.1 </ li > < li...
Post a Comment
Read more

CSS Even Odd For Every Other Odd Div In Class

Answer : :nth-child(4n) gives us 0, 4, 8, etc. Since you want 1, 5, 9, you should try :nth-child(4n + 1) What you want to do is apply the css to every fourth row, so you want to do: .myClass:nth-child(4n+1)
Post a Comment
Read more

Css :last-of-type Example

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements. /* Selects any <p> that is the last element of its type among its siblings */ p:last-of-type { color : lime ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :last-of-type Examples Styling the last paragraph HTML < h2 > Heading </ h2 > < p > Paragraph 1 </ p > < p > Paragraph 2 </ p > CSS p:last-of-type { color : red ; font-style : italic ; } Result Nested elements This example shows how nested elements can also be targeted. Note that the universal selector ( * ) is implied when no simple selector is written. HTML < article > < div > This `div` is first. </ div > < div > This < span > nested `span` is last </ span > ! </ div > < div > This < em > nested ...
Post a Comment
Read more

Css :has Example

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element. /* Selects any <a>, as long as it has an <img> element directly inside it */ /* Note that this is not supported in any browser yet */ let test = document. querySelector ( 'a:has(> img)' ) ; Syntax :has( <relative-selector-list> ) where <relative-selector-list> = <relative-selector> # where <relative-selector> = <combinator> ? <complex-selector> where <combinator> = '>' | ' +' | '~' | [ ' ||' ] <complex-selector> = <compound-selector> [ <combinator> ? <compound-selector> ] * where <compound-selector> = [ <type-selector> ? <subclass-selector> * [ <pseudo-element-selector> <pseudo-class-selector> * ] * ] ! where <type-selector> = <wq-name> | <...
Post a Comment
Read more

CSS Last-child Selector: Select Last-element Of Specific Class, Not Last Child Inside Of Parent?

Answer : :last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type http://jsfiddle.net/C23g6/3/ As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment . body { background: black; } .comment { width: 470px; border-bottom: 1px dotted #f0f0f0; margin-bottom: 10px; } .comment:last-of-type { border-bottom: none; margin-bottom: 0; } <div class="commentList"> <article class="comment " id="com21"></article> <article class="comment " id="com20"></article> <article class="comment " id="com19"></article> <div class="something"> hello </div> </div> If you are floating the elements you can reverse the order i.e. float: right; instead of float: left; And ...
Post a Comment
Read more