I have css rule as follows,
.wrapper > h3{
color:red;
}
The html code,
<div class='wrapper'>
<h3>Text1</h3>
</div>
<div class='wrapper'>
<div data-ui-view=''>
<h3>Text2</h3>
</div>
</div>
Here is the plunker. The Text1 is shown in red colour but Text2 is not. I understood that this rule
will take the immediate <h3> element under .wrapper. In angularjs most of the time the elements will be wrapped under tag. So, I want to make a rule such that whenever an <h3> tag comes inside .wrapper class then it has to be in red colour. irrespective of <h3>'s parent elements. Is there a way to do it?
Simply make the rule:
.wrapper h3 { color: red; }
This will make all <h3> elements within the .wrapper class red
If you did want to target the grandchild element as your question title suggests you could use this rule:
.wrapper > * > h3 { color: red; }
Related
I have a h3 tag which is deeply nested as follows and can't amend the component that contains
this styling.
Instead since I only have 1 h3 within this nest, trying to target it and amend its padding.
But this is not working. Can I know what I am doing wrong? I am doing something similar for another
div tag targeting the 6th position for that div. That works fine. Issue is with targetting this h3
tag. Tried adding !important to these styling which makes no diff. What am I doing wrong here?
This is the structure of the html currently.
// This is the only div I created passing in my custom styling and the component is wrapped within this.
<div className={styles.main}>
// all the following is coming from an external component I can't amend.
<div>
<div>
<div>
<div>
<span>some span text 1</span>
<div>some span text 2</div> <!-- also targetting this div and this works fine. See CSS below -->
</div>
<div></div>
</div>
</div>
<div>
<div>
<div>
<h3> <!-- This is the only h3 in entire nest -->
Some Random Text <!-- trying to give this a left padding -->
</h3>
</div>
</div>
</div>
</div>
</div>
My SCSS File
.main > div:nth-child(5) {
padding-top: 100px; // this works fine
}
// tried all the following. None of them works. I do not get the padding left 50px;
// The text is stuck to the left with no margin / padding.
.main > h3 {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-of-type {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-child {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
The problem is that you are using the direct descendant selector.
You are only selecting h3 elements that are direct children of .main
You need to modify your selector to select children/grandchildren/etc.
.main h3 {
...
}
I have a simple HTML structure, which I want to show only the second DIV with class "entry":
<div id="wrapper">
<div class="highlight">Hightlight</div>
<div class="entry">Entry 1</div>
<div class="entry">Entry 2</div>
<div class="entry">Entry 3</div>
<div class="entry">Entry 4</div>
</div>
Therefore I use nth-child(x) pseudo selector trying to achieve it:
#wrapper .entry {
display: none;
}
#wrapper .entry:nth-child(2) {
display: block;
}
But end up, "Entry 1" shows up instead. How does :nth-child(x) count? It ignores the selector .entry completely and just count the occurrence of <div> class.
Demo : JSFiddle
It ignores the selector .entry completely and just count the occurrence of <div> class.
That's almost correct. How it works is:
it takes all the div elements with class entry
it takes all the div elements that are 2nd element of it's parent
it takes an intersection of 1) and 2)
What you really want is something like nth-of-class, which is not a thing (I think there is a proposal to add it in next version of CSS).
You should do rather this
#wrapper .entry { /* hiding first */
display: none;
}
#wrapper .entry + .entry /* showing second and following */
{
display: block;
}
#wrapper .entry + .entry + .entry /* hiding third and following */
{
display:none;
}
not that pretty but will work.
Check it here: http://jsfiddle.net/rwvzq4sL/1/
I'm trying to make a simple web page design with multiple divs. Each div should apply 1 or more external stylesheet from a list.
My problem is that, from the examples I've read so far, I'm not sure how to do this elegantly. It seems that external stylesheets are applied to the whole html file. So should I be looking at modularizing my divs into separate files? Or would something like iFrame be a neater solution?
Current Solution:
External CSS:
div.test1 {
color: purple;
background-color: #d8da3d
}
.test2 {
color: red;
background-color: #d8da3d
}
#test3{
color: green;
background-color: #d8da3d
}
HTML body code:
<div class="test1">
<p> Style1
</div>
<div class="test2">
<p> Style2
</div>
<div id="test3">
<p> Style3
</div>
My references:
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html
- 1
Take a look at this:
https://stackoverflow.com/a/17668004/1552518
- 2
Or just add a class to each div:
<div id="container">
<div class='div1'>
style1
</div>
<div class='div2'>
Style2
</div>
</div>
And in your external css:
.div1 {
// Style applied only to the first div
}
.div2 {
// Style applied only to the second div
}
- 3
Or if you can't add a class to the divs use this in css:
#container > div:first-child {
// Style applied only to the first div
}
#container > div:last-child {
// Style applied only to the second div
}
Are you just trying to style the div's differently? Have you looked into using a class for each of the divs?
From the second link you provided: http://www.htmlhelp.com/reference/css/style-html.html#class
When you use the css styling:
body{
color:purple;
background-color: #d8da3d
}
You are saying that you want to style the entire body of the document with the styling you have set.
In order to target specific elements you should give those elements an id or class.
For example:
<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>
Please note that when using and id you must make sure to give the element a unique id. However many elements can share the same class. Therefore for the above example the styling:
#test1{
color:blue;
background-color:black;
}
.testing{
color:red;
background-color:white;
}
Will apply the first style (test1) to the div with the same id, and the second style (testing) to the two divs with the same class.
I want to be able to change the background color of an anchor by applying a class to the anchor's parent div, and I need help with the syntax for the selector.
Here's my HTML, and there will be many links, so that's why I'd prefer to apply the class to the div rather than to each anchor within the div:
<div id="container">
<div class="cell">
should be green
should be green
should be green
</div>
<div class="cell color2">
should be red
should be red
should be red
</div>
</div>
Here's my CSS and the syntax of the color2 selector is wrong, and it doesn't change the background color of the color2 anchor:
div.color2 a {
background: #f00;
}
#container a {
display:inline-block;
float: left;
height:14px;
background: #0f0;
}
The specificity of your second selector is greater than your first one, so its styles will win out (this is the "cascade" in Cascading Style Sheets, btw). By virtue of that ID being in the selector, it will win out over any selector that contains only elements or classes. Try this:
#container div.color2 a {
background: #f00;
}
ref: http://css-tricks.com/specifics-on-css-specificity/
I have this HTML --
<ul class="parent">
<li>
<div class="child-1 x">
<div class="child-2 x">test</div>
</div>
</li>
<li>
<div class="child-1 x">
<div class="child-2 x">test</div>
</div>
</li>
<li>
<div class="child-1 x">
<div class="child-2 x">test</div>
</div>
</li>
</ul>
And this CSS --
.x{
border:1px solid black;
padding: 10px;
}
.child-1:last-child{
border-color:red;
}
http://jsfiddle.net/BDj2h/1/
Im trying to apply red border only to the last child-1 div. But its not happening. CSS last-child pseudo class checks whether its the last element inside its immediate parent, not in the whole DOM(which was my wrong understanding).
Any idea how to do this with css only?
li:last-child .child-1
Would have the same effect.
JSFiddle
:last-child1 pseudo won't respect the last declared class, it just tracks the last instance of the element in the parent/child relation.
1 Same as :nth-last-child(1). The :last-child pseudo-class represents an
element that is the last child of some other element.
So for example, if you've something like
Writing something like
div.wrap div.blow:last-child {
/* .blow doesn't make any sense there, CSS will look up
for last div element nested inside .wrap */
}
In this case, you can try using
.parent li:last-child div[class^="child-1"] {
border-color:red;
}
Or simply
.parent li:last-child div.child-1.x {
border-color:red;
}
Demo
Note: last-child is somewhat loose pseudo, as it will simply ignore the element if it's not the last child of the parent element, so here, last-of-type comes in to action where it selects last type of an element regardless of it's DOM level.
ul li:last-child > div.child-1 {
border-color:red;
}
Example: http://jsfiddle.net/BDj2h/3/