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/
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.
Both of the following codes seem to work properly to style the span element:
<style>
div p span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
<style>
div span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
But I'm not sure if the second one is the right coding and if there's a difference between them, for example regarding browser support.
Neither of them is a “subchild selector”; there is no such concept in CSS. They are different descendant selectors, or descendant combinators as they are called in the Selectors Level 3 specification. Their meanings are different, so it depends on the purpose which one is better.
The selector div span matches any span element that is a descendant of a div element. The selector div p span matches any span element that is a descendant of a p element that is a descendant of a div element. Both selectors are rather theoretical as such; they are hardly useful in practical situations without some additional components such as class selectors.
They both work because the elements selected by div p span are a subset of the ones selected by div span.
If you include a <span> as a child of the <div>, the second one will select it, but the first one will not. If you don't include a <span> as a child of the <div>, they will select exactly the same elements.
For example:
<div>
<span>Only the second selector will make this text red</span>
<p>
<span>Hello, world!</span>
</p>
</div>
Well, it really depends on the context. For example, this selector...
div p span
will only apply to all span elements that are children of a p element which in turn, are children of a div element. Consider, this html...
<div>
<span class="title">Title</span>
<span class="desc">Description</span>
<p>
<span>Content</span>
<p>
</div>
the following css declaration will color the content span in blue
div p span
{
color:Blue;
}
however the style is not applied to the title and the description because they are not children of a p element. Now by using this css declaration...
div span
{
color:Blue;
}
will cause both the title, description and the content to be coloured in blue because this selector targets all span elements that are nested within a div element
As for performance, that's hard to determine because it all depends on implementation and how well different browsers traverse through a DOM hierarchy and apply the style. But, I'd guess that the more specific you can be the better so that the HTML parser can target elements directly. With that in mind, this css selector...
div p span
should perform faster than
div span
because it will cause the rendering engine to look for all div element, then p elements ignoring all other elements (including span elements that are direct children) and finally it'll look for span elements
both of them will work but
div p span {
font: 18px arial;
color: red;
}
is more correct, and you are less likely to have problems like when you decide to add a span in an li for some other possible purpose.
div > p > span {
font: 18px arial;
color: red;
}
First method is correct way.The styles work only span that inside of the p tag and you can give/edit/change specific styles on this item ...but the second method's style work all span inside of div tag..
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/
I have a <div> element with a <p> element inside:
<div style="font-size:10pt; color:red;">
This is my Parent Div.
<p>This is my Child Paragraph.</p>
My parent Div Ends Here.
</div>
How can I prevent my paragraph from inheriting the CSS properties set to the <div>?
In your case the best way is to just over right the styles that the <p> element is inheriting:
So in your CSS file, which you should be using instead of inline styles:
.parent-div {
font-size: 10pt;
color: red;
}
.child-paragraph {
font-size: 12pt;
color: black;
}
In your child node -
<p style="font-size:12pt; color:black;">This is my child</p>
Just set the inline style to whatever you want.
You can use the > selector in CSS to select the immediate child p of div.
Fiddle link
div > p {
font-size:1.2 em;
color: green;
}