I have a <section> element that I want to set focus within only when the first child element receive focus but not the second. I tried using the :not pseudo-class but that didn't work out.
Worth noticing that I still need to have focus on the second element, just don't want to have two focused elements (parent + child) as the example below.
Codepen example
Better if a HTML/CSS only hack/solution.
":focus-within" makes the parent element to have focus if any of its children have focus itself. You can't do this only with css, as you can only select elements that are siblings or children, except for this unusual case that selects the parent (even though you can't select which element has focus inside). You are applying the focus within to the section, not to the children.
Related
I want to set some attributes on all text excluded text in <nav>...</nav>.
I know it can be done using :not() but it only applies on parent element, not on children within that parent.
Is it possible, to apply :not() on all children within parent?
This could help:
nav *:not(....)
The * is a wildcard selector.
Maybe this is interesting for you too: Can I write a CSS selector selecting elements NOT having a certain class or attribute?
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 4 years ago.
I know how to change style of an element on hover but i want to change style of another element when first element is focused or hovered.
This is purely dependent on your HTML structure.
If your affected element is a child of the trigger element, then you can use the pattern
.[TRIGGER_PARENT_CLASS]:hover .[AFFECTED_CHILD_CLASS]
This pattern can nest as deep as you would like. It is also worth noting that you may want to use the Child combinator to select a direct child element.
If your affected element is a sibling of your trigger element, and the trigger element is directly preceding the affected element you can use pattern:
.[TRIGGER_CLASS]:hover ~ .[AFFECTED_SIBLING_CLASS]
You can learn more about Child and Sibling Selectors in this CSS-Tricks article
Something that I was wondering while styling my latest HTML5/CSS3 baby: Do some elements inherit their sibling's parameter's values if we won't specirfy the parameters and values for these elements? Basically I had a situation in which 3/4 of the website's home page elements have been styled already in stylesheet and what was left was the footer section.
Last element that I've styled was a boxcontent with two columns. The columns have been styled with a float:left parameter and value. Upon that when I've reloaded the page, the footer section which is not styled like I've mentioned before, have moved up and to the extreme right from column2 of boxcontent section.
I'm wondering why the footer section has inherited some of the sibling's section's parameters and values if the footer is not even inheriting this data straight from it's parent element - that is body.
Children inherit parent's values, but siblings do not inherit each other's parameters. Your layout was changed, because you've used floating, which can affect positioning of elements that are below the floated blocks. When using floating for positioning it is a good idea to clear floats.
Elements don't inherit siblings styles, but do inherit their parent's styling. I've ran into layout issues that I've traced up many levels on a parent. Chrome's developer tools are a great way to inspect where styling is coming from for any selected element.
I couldnt understand the below from W3C spec.
div * p
matches a P element that is a grandchild or later descendant of a DIV element. Note the white space on either side of the "*" is not part of the universal selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P.
How the white space is a combinator indicating that the DIV must be the ancestor of some element?
Please help to clarify
To answer your question, you need to first understand how CSS rules are interpreted by the browser.
Whenever you write a CSS selector, you can use one or many elements in the selector. For instance, the selector div has one element, both div p and div > p have two.
Think of a CSS selector as several stages of filtering. CSS selectors are actually interpreted by the browser reading them from right to left. When multiple elements are specified in a selector, you first find the set all the elements for the right-most piece, then filter that set by the next piece, and so on.
In the case of the div rule, we are saying "find me all 'div' elements on the page". Simple enough.
In the case of the div p rule, we first "find all the 'p' elements on the page". But then, for each of those 'p' elements, we then ask "give me just the 'p' elements that have a 'div' as an ancestor".
Using the same logic, let's describe div * p: we first "find all the 'p' elements on the page". Next, we ask "give me just the 'p' elements that have a parent element of any kind". From that set, we then ask 'give me just the elements out of this set that have a 'div' as an ancestor".
The selector div * p would be almost the same as div p, but with one key difference: the <div> would have to be at least a grandparent of the <p> for the selector to match. See http://jsfiddle.net/cDTGY/ for an example.
In many places I have put elmeents nested in other elements. I can't deduce when a child element causes the parent element to expand. I don't have any code to post as this is a general conceptual question so that I can design as needed.
The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.
To answer your main question in the most simple manner (and being very general):
Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
Elements like div, p, and ul are all block.
These will generally cause your parent element to expand.
Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
Elements like span, em, strong are all inline.
These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.
There are many ways to tweak the display of elements with CSS.
Get firebug for firefox. You can browse the DOM (the HTML structure of the page) and it will highlight elements according to how the "browser's eye" sees them (versus how they look aesthetically).
A few general rules of thumb:
Children will expand their parent's height as long as they're not floated or absolutely positioned, but...
You can "clear" a series of floated images http://www.quirksmode.org/css/clearing.html to make the parent element expand
If you use top positioning for a relatively positioned child element, the browser will still see that element in the exact same place. In other words the height of the parent element will stay the same regardless of where the child is relatively positioned to.
Using positive or negative margins on a child that is display: block will add or subtract height from its parent