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;
}
Related
I need to style h1, h2, h3... and p tags inside a div but I only have access to the content area.
If it where possible, this would be what I'd use:
<div style="h1{padding:0;}p{font-size:1.4em;color:#000}">
Is there a solution to do this ? Apart from adding the style to every element.
Thanks
Although HTML syntax restricts style elements to the head part, this requirement is not enforced in practice. It works inside body, too. You just need to take into account that the effects are global to the document. Thus, to limit the effect to elements inside a certain element, you need to use suitable selectors. Example (I have added a color setting because the effect of just padding: 0 as in the question in not noticeable: it equals the default):
<h1>Heading outside the div</h1>
<p>A paragraph outside the div.</p>
<div class=mydiv>
<style>
.mydiv h1 { padding: 0; color: green; }
.mydiv p { font-size: 1.4em; color: #000; }
</style>
<h1>Heading inside the div</h1>
<p>A paragraph inside the div.</p>
</div>
There isn't a good solution.
Style elements may only appear in the head.
Inline style only applies to the element the attribute appears on.
The closest you can come is to use JavaScript to dynamically modify the stylesheet.
You would be better fixing whatever problem is preventing you from modifying the head section.
To avoid unwanted changes inside divs i will be using to divs with 2 unique id's:red and green
If you want different style for specific divs:
<div id="red"><h1>red</h1><p>red</p>
<div id="green"><h1>green</h1><p>green</p>
body #red > h1,body #red >p{
color:red;
}
body #green > h1,body #green > p{
color:green;
}
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 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>
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }
I'm just beginning to learn CSS (and XHTML) and I ran into a problem of assigning different properties to tags which have the same tag name.
For example: I have two h3 headers, but want to address them specifically using CSS because I want to make them different colours.
I believe this has something to do with naming the headers differently (i.e. h3.a), but trying this didnt work. Help would be appreciated!
Besides the tag name CSS can be applied by Class and ID. Note that it's best to make sure the case in your tags matches the case in the tags.
.myClass may not apply to class="myclass"
IDs:
<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>
<h3 id="FirstHeading"></h3>
<h3 id="SecondHeader"></h3>
Classes:
.redHeading {color: red;}
.blueHeader {color: blue;}
<h3 class="redHeading"></h3>
<h3 class="blueHeader"></h3>
The purpose of IDs are typically to point to one specific element in your page, classes are designed to work with multiple different elements
Classes can also be combined, so you don't need to load all the styles into one class.
<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>
<h3 class="redHeading boldHeader"></h3>
<h3 class="blueHeader boldHeader"></h3>
You can assign a class to each element and use CSS to target only that class. For example:
HTML:
<h3 class="green">Green heading for this one</h3>
<h3 class="red">Red heading for this.</h3>
CSS:
h3.green { color:green; }
h3.red { color:red; }
Add different class attributes to each h3, then address them in CSS using .className.
e.g:
HTML:
<h3 class="class1">One header</h3>
<h3 class="class2">Another header</h3>
CSS:
.class1 {
color: #00f;
}
.class2 {
color: #f00;
}
This is where classes come in handy.
CSS
.myFirstClass { color:green; }
.mySecondClass { color:red; }
HTML
<h3 class="myFirstClass">Text</h3>
<h3 class="mySecondClass">Text</h3>
There are so many different ways to target selectors.
You can give them class names:
<h3 class="makeblue">This should be blue</h3>
<h3 class="makegreen">This should be green</h3>
// in you css
h3.makeblue { color: blue; }
h3.makegreen { color: green; }
You can use "advanced selectors":
<div class="container">
<h3>This should be blue</h3>
<p>
<h3>This should be green</h3>
</p>
</div>
// in your css
div.container > h3 { color: blue; }
div.container p h3 { color: green; }
have a look here: http://css.maxdesign.com.au/selectutorial/
A useful thing to keep in mind when naming classes is to avoid names that imply how the class is styled. Naming classes after their styles leaks design information into the HTML, and if you later do a redesign, you will either have class names that no longer match the design, or you will have to edit both the HTML and the CSS to keep it up to date.
A much better practice is to create classes with semantic meaning, such as: subtitle, navigationHeader etc. Additionally, it's a good practice to give multiple classes and thus "extend" objects instead of repeating yourself:
<h2 class="subtitle forum">Forum</h2>
<h2 class="subtitle group">Groups</h2>
.subtitle {
font-size: 14px;
font-weight: bold;
color: green;
}
.subtitle.forum {
color: blue;
}
.subtitle.group {
color: red;
}
In CSS by addressing a tag you address all copies of that tag unless you are more specific.
e.g.
a h3 {} would address all h3 tags within an a tag.
However if you want to style individual elements or want more freedom you should be using a class or an id.
An id can be used on one element and works like so:
<h3 id="header"></h3>
you can then use
#header {
// your css style here
}
to style it.
Or you can use a class which can be used on multiple elements like so:
<h3 class="red"></h3>
<a class="red"></a>
you can then use
.red {
// your css style here
}
to style it.
Google provides some good video tutorials here: HTML, CSS and Javascript from the ground up
Make a class in CSS, like this:
h3.class1
{
color: blue;
}
Then just say:
<h3 class="class1"></h3>
You can use the class or a parent to define it. If you use a class it would be defined like:
h3.colorOne {
color: #ff0000;
}
h3.colorTwo {
color: #0000ff;
}
Then they would be used like:
<h3 class="colorOne">I'm red</h3>
<h3 class="colorTwo">I'm blue</h3>
Alternatively you can specify settings by a parent using an id field in a div of sorts:
#divOne h3 {
color: #ff0000;
}
#divTwo h3 {
color: #0000ff;
}
Which would be used like:
<div id="colorOne"><h3>I'm red</h3></div>
<div id="colorTwo"><h3>I'm blue</h3></div>
The usage all depends on the needs of your layout and the extensibility of your styles.