Let's say my html looks like this:
<div class="container">
<... some html here ...>
</div>
I want to get the first direct child of .container.
I could do .container > div:first-child but that's assuming the it is a div which is not always the case.
Use the :first-child pseudo-class without a tagname:
.container > :first-child
This will grab any element that is the immediate first child, regardless of its tagname. This is similar to the way in which we use other pseudo-classes such as :hover which alone targets any element, while a:hover targets only the hover state of anchors.
Not using the element itself, but a class is a better solution and way more semantic for so many reasons.
And give the class to the children of the element, not only the container like this:
HTML:
<article class="container">
<p class="blah">First paragraph...</p>
<p class="blah">Lorem ipsum...</p>
<p class="blah">Dolor sit amet...</p>
</article>
CSS:
.blah {
background: red;
color: white;
}
.blah:first-child {
background: #000;
}
You can see it in action here: http://jsfiddle.net/Roobyx/ygP4B/
Related
Basically, I'm creating a dark theme system for my website, and it adds the dark class to the html tag when the proper function is called. I'm using CSS variables like --light-theme-bg: white; and accessing them with var(--light-theme-bg);. How can I style specific elements such as hr based on if that dark class is attached to the html element. How can I do this?
Scoping is your friend. You'll need to add two rules to your CSS. One for the dark theme and one for the light one.
In those rules, you can define a --background var.
All child elements that reference that var will respect it.
.light {
--background: #f9f9f9;
}
.dark {
--background: #191919;
}
.first,
.second {
color: red;
background: var(--background);
}
<div class="light">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
<div class="dark">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
If you want to select an element inside a .class, use the css syntax .class element, so your code would be .dark hr to select it an hr element inside an element with the class of .dark.
As you mention It added "dark" class to the parent html tag. So considering dark as parent class you can use css to all element like
.dark elements(h1/div/p/others)
I was introduced to the following code:
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>
Link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_inherit
I'm not sure why the colour of the extra span is green. When they use the 'inherit' value, do they take a colour similar to the first one introduced? Is that what it is?
What's the 'parent' and 'child' referring to here? What's their definition?
If we have a <p> inside a <div> element, the <div> is the parent of the <p> and the <p> is the child of the <div>
<div>
<p></p>
</div>
You can read this web: https://www.w3schools.com/js/js_htmldom_navigation.asp it explains perfectly.
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships.
In a node tree, the top node is called the root (or root node)
Every node has exactly one parent, except the root (which has no
parent)
A node can have a number of children
Siblings (brothers or sisters) are nodes with the same parent
CSS uses this structure to make specific selectors like first-child, :nth-child(n), :last-child...
You can see all CSS selectors here
The value inherit of a CSS attribute applied to an HTML node, simply takes the parent value of the attribute.
So if I have an html like this:
<div>
<p></p>
<p class="red"></p>
</div>
And css like:
div {
background-color: red;
}
div > p {
background-color: blue;
}
.red {
background-color: inherit;
}
The div with the red class, using inherit will take the value red of the parent.
Since the <span></span> elements are nested within their 'parent' <div></div> elements, they are said to be 'children' of the 'parent' div.
<div id="parent">
<span id="child1"></span>
<span id="child2"></span>
<span id="child3"></span>
</div>
The 3 spans are children of the parent div, and siblings of each other. Much like a family. When a child inherits styles from its parent, it uses the same style as its parent uses for that particular style.
color: inherit;
means that when assigning the span its color, it will defer to whatever the parent color is, which in this case was green.
inherit summary: from https://developer.mozilla.org/en/docs/Web/CSS/inherit
The inherit CSS-value causes the element for which it is specified to
take the computed value of the property from its parent element. It is
allowed on every CSS property.
Brake down your code to single parts to understand what's going on like:
span {
color: blue;
border: 1px solid black;
}
This means every span has a blue color.
Moving on to next lines:
.extra span {
color: inherit;
}
This means every span inside an element with a class="extra" will inherit the color. Means all the <span>s inside .extra will take it's parent color.
Now as you see in your result every span has blue color, except the one inside the div with class extra which has an inline style on color saying it is green.
In this, you have used both Internal and Inline styling at the same time. Since Inline styling has the highest precedence over Internal and External Styling that is why that extra span turns out to be Green.
http://codepen.io/oscholz/pen/qNYPVL
I am trying to select only the Random unattached paragraph.
I've tried a number of things that I think should all work (see below or the
p:first-of-type {
color: red;
}
.a:not(.relevant) {
color: red;
}
.a:nth-child(1) {
color: red;
}
.a:first-child {
color: red;
}
<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
<p class="a">first</p>
<p class="a">second</p>
<p>third</p>
<p>fourth</p>
<p class="a">fifth</p>
<p class="a">sixth</p>
<p>seventh</p>
</div>
None of them do. What am I missing?
I know I could change the HTML, but I don't want to do that. :)
The correct answer is body > p
This is a test question in a Purewal's "Learning Web App Development":
https://books.google.com/books?id=JLDZAgAAQBAJ&pg=PA94&lpg=PA94&dq=%E2%80%9CSelect+only+the+random,+unattached+paragraph.%E2%80%9D&source=bl&ots=2h8FEOEPar&sig=tIdTEyLid_qpzEJPmYYTIIVxM50&hl=en&sa=X&ved=0ahUKEwiqnLG588_OAhWBrB4KHYUJByYQ6AEIIjAB#v=onepage&q=%E2%80%9CSelect%20only%20the%20random%2C%20unattached%20paragraph.%E2%80%9D&f=false
The book author points us to the answer in his next paragraph, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors
Purewal is illustrating the difference between CSS's descendant and child selectors, which is why, using the HTML defined for the question (see below), the simplest answer that illustrates the lesson is pedagogically correct.
<body>
<h1>Hi</h1>
<h2 class="important">Hi again</h2>
<p class="a">Random unattached paragraph</p>
<div class="relevant">
<p class="a">first</p>
<p class="a">second</p>
<p>third</p>
<p>fourth</p>
<p class="a">fifth</p>
<p class="a">sixth</p>
<p>seventh</p>
</div>
</body>
Excerpt From: Semmy Purewal. “Learning Web Application Development.”
There are many ways. You need to decide the semantic meaning of what you want to select and devise your selector based on that.
body > p.a would select all p.a elements that are direct children of the body tag (i.e., not nested inside any containers).
.important + p.a would select any p.a elements that come immediately after an .important element.
p.a:nth-of-type(1) would select the first paragraph tag if it has class a.
p.a would select all p.a elements, and you could then use .relevant p.a to override (or undo) any attributes on the ones you didn't want to affect.
Well-written semantic HTML should always describe the purpose of an element based on context, tag choice, and class and/or id attributes. If your document's markup is not semantic, there is only so much you can do to create a generalized CSS selector for the components you want to affect.
body > .a { color: red; }
This would select only the .a outside the .relevant container. You could also do something like this:
.a { color: red; }
.relevant .a { color: black; }
I would create the default rules in .relevant for all it's children. Then let the rules for .a handle those particular children. No hoops, nth or piping.
Your unattached <p>'s will end up with a different style than the ones with the .a class.
Try...
body > p{
color: red;
}
Assuming I wanted to attribute the text-shadow: green; attribute to every <h2> element occouring inside an element with the classes .dark and ux-bannerwhat CSS code would achieve this?
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
As in the above example <h2> element will be wrapped in a <div> with varying classes attributed to it.
What would be the best way to apply the text-shadow: green; property to the <h2> element when occouring within elements that have the .dark and ux-banner classes attributed without making reference to the <div> immediately surrounding the <h2> element
I believe you're looking for:
.dark.ux-banner h2 {
text-shadow: green;
}
That means: "Set text-shadow: green on all h2 elements that are descendants of an element with both the classes dark and ux-banner.
Alternately, if you want to be somewhat specific:
.dark.ux-banner div h2 {
text-shadow: green;
}
(Only applies to h2 elements within div elements within .dark.ux-banner elements.)
Or hyper-specific:
.dark.ux-banner > div > h2 {
text-shadow: green;
}
(Only applies to h2 elements that are direct children of div elements that are direct children of .dark.ux-banner elements.)
The key bit above is really that .dark.ux-banner (with no spaces) means "an element with both of these classes." The rest is just descendant or child combinators.
You will need
.dark.ux-banner h2{
text-shadow:green;
}
What this does is selects the elements that have the class .dark then checks if it has the class .ux-banner then selects all h2 inside that
.dark.ux-banner h2 { text-shadow:green; }
http://jsfiddle.net/YjGhw/
Here is the demo http://jsfiddle.net/tFScD/2/
<div class="demo">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
.demo div h2{
text-shadow:2px 2px green;
}
It's simple. Just use the following:
.dark.ux-banner h2 {
text-shadow:green;
}
This means every h2 element inside an element with these classes will have the text-shadow:green propperty no matter if the h2 element is inside a div or not.
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>
TARGET THIS ELEMENT
</h2>
</div>
</div>
or
<div class="dark ux-banner">
<h2>
TARGET THIS ELEMENT
</h2>
</div>
will work the same ;)
.dark.ux-banner h2{
text-shadow:0 0 4px green;
}
the markup
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
demo: http://jsfiddle.net/cQcbp/
I have this code.
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
.myDiv div:nth-child(odd) {
color: red;
}
.myDiv div:nth-child(even) {
color: blue;
}
I see why it's not working. It's making every odd div within myDiv be red. What I want it to do is make every odd example of a div within myDiv be red. How can I write that?
Here's a JSFiddle.
There are a couple of problems here. The :nth-child is on the wrong element. The inner divs are always the first child, so the :nth-child(odd) selector works for both. Instead move to
.myDiv:nth-child(odd) div
...however this does not work either because of the <p>. A working solution with your sample is
.myDiv:nth-of-type(odd) div
http://jsfiddle.net/tvKRL/1/
NOTE that the nth-of-type only works because the .myDiv elements are all divs (it's based on the element, not the selector), so the selector ignores the <p>. If there can be another div between .myDivs I don't think any CSS will work for what you want to do.
You can't do this generically, for the reason given by Domenic. To put it simply: there's no selector that lets you filter an existing subset of matched elements.
On the off chance that among your p and div.myDiv siblings the only div elements are the ones with that class anyway, then you could use :nth-of-type() to have it look at those intermediate divs only:
div.myDiv:nth-of-type(odd) div {
color: red;
}
div.myDiv:nth-of-type(even) div {
color: blue;
}
Or if there are other divs without that class which should be excluded, then unless there is some sort of pattern in which they're laid out, you're out of luck.
This is not possible. There is no CSS selector that will do what you want, as you can see by perusing the complete list of selectors.
In general CSS selectors do not "reach out" to encompass elements above the DOM tree of the one selected. You are asking for something even more sophisticated than that, combining characteristics of parent elements with ordinal properties of the targeted elements, even though those targeted elements are distributed among entirely different places in the DOM tree.
Just applynth-childto the first member of the descendant selector, not the last one.
div:nth-of-type(odd) > div {
color: red;
}
div:nth-of-type(even) > div {
color: blue;
}
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>