currently i have
<div class="rightBoxesTop">
<h3>My Pages</h3>
<h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
show in-active <input id="show-in" type="checkbox"></h3>
</div>
I would like to move the inline style to the css. Is this only way to the second H3 an id or is there a way to reference the class rightBoxesTop and use some thing like second something? Also if you could tell me what this kind of styling is so i could search for keywords on how to use it correctly
Thanks
You can try this to style 2nd, 3rd and other following h3 tags:
.rightBoxesTop h3 + h3
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
Also you can use CSS3 selector to style only the second h3:
.rightBoxesTop h3:nth-child(2)
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
if you are able to remove the inline styles, then you can also add a class for it.
This gives you the option to style it easily by its class in the CSS.
UPDATE: Because you must remove the inline styles, you can not override them in your CSS.
You can use the selector div.rightBoxesTop h3 + h3. It will style only h3 elements that are preceded by another h3 element. This does mean, that if you got more of them, they will all be styled, except the first one.
But in this case, I would consider adding a class (rather than an id) to the second h3.
You can use .rightBoxesTop h3+h3{} as people suggested, but be careful, if you add another h3 the last 2 h3's will have that styling, or if you create another div inside .rightBoxesTop that has more than h3's they will get the styling as well, so a precise way would be:
.rightBoxesTop>h3:first-child+h3{
//your css here
}
Which would mean "The first children's( ">" means direct child, so if there are more nested levels they won't count) next h3, will get the css"
Related
In the process of making a single page website, the css for my form is interfering with the rest of my page. Can the div be specified without going one by one through the css and specifying the div. Any help appreciated.
I recommend you to read up on CSS Selectors, which are different ways in CSS that you can select specific parts of your HTML elements.
The most basic ones are:
The Element Selector
p { color: #ff0000; }
This selects any element in your HTML that match the CSS rule. In this case it would match all <p>.
The ID Selector
#paragraph { color: #ff0000; }
This selects the element that got a unique ID set to "paragraph". In this case it would select any of the following elements:
<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>
Note that ID's are suppose to be unique. You are not suppose to have multiple elements with the same ID in your HTML.
The Class Selector
.paragraph { color: #ff0000; }
The class selector selects all element with a class name that match the CSS rule. Note that class names do not need to be unique, unlike ID's, many elements can share the same class name.
The rule above match all of the following elements
<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>
You can also combine these (and other CSS selectors) to be more specific of what you want to select and style with your rule. For example, if you only want to select all <p> with the class name paragraph, but no other elements with the same class. You would write the following:
p.paragraph { color: #ff0000; }
Fix your problem
With the knowledge above you can easily fix the issue you are having. The CSS of your form is very generic and it uses Element Selectors to select all elements on the page. You can fix this by setting classes and ID's on your HTML elements, and then adjusting your CSS rules to select the specific elements that you want to change.
The form you are trying to use includes some very generic CSS - it styles the <body> and <header> elements, for starters, as well as all <input> elements. If you want to limit the impact of the CSS from the form on the rest of your site, you will need to make it more specific. For example, if you change
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
to
#form header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
it will only be applied to <header> elements that are inside of an element with the id="form" attribute (in this case, that's the ID on the form you are trying to use). You may have to add this more specific selector to several of the CSS selectors from the form that are impacting other parts of your page.
I've got this html element :
<span class="item-menu-notif non-lue" onclick="dosomething(2150)">
TEXT
</span>
Here's CSS classes :
.item-menu-notif{
display: block;
cursor: pointer;
padding: 0 0.4em 0 0.4em;
}
span.item-menu-notif:hover{
background: #aaaaaa;
}
span.item-menu-notif .non-lue{
font-weight: bold;
}
My problem is that the non-lue class is not use. In firebug I can see that the class doesn't appear on my span element.
I can't understand why. I tried with and without span selector on my CSS. It's the same result.
Remove the space between the selectors:
span.item-menu-notif.non-lue
You only use space if you want to target elements who are descendants. But since you want to target the element with both classes, you have to remove that space between them.
It's because of the
span.item-menu-notif .non-lue{
font-weight: bold;
}
With this you tell to the browser, "find for me an element with the class
'.non-lue' that is into a span element with the class name 'item-menu-notif'".
For specifying a more explicit rule for an element, like in your case, where you want a span element that is an 'item-menu-notif' and a 'non-lue' you should provide the class names without whitespace between them (with a whitespace character between selectors it is assumed that the right most is a descentant of the left side selector).
Please check out these links, hope they will help you:
The first one is about selectors and the second & third are about specificity rules.
1) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
2) https://css-tricks.com/specifics-on-css-specificity/
3) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
And of course the right answer is:
span.item-menu-notif.non-lue{
font-weight: bold;
}
This selector says that an element with a class of .non-lue inside your span will be styled, instead of the span element.
span.item-menu-notif .non-lue{ font-weight: bold; }
Remove the space and it will go from saying .non-lue inside the span to span with .item-menu-notif AND .non-lue.
span.item-menu-notif.non-lue{ font-weight: bold; }
You should do this
span.item-menu-notif.non-lue{
font-weight: bold;
}
I'm doing homework for my html class. And the book makes us insert some css. So I copy pasted it. Here it is.
body {
font-family: Arial, Verdana, Garamond;
font-size: 11pt;
}
a {
text-decoration: none;
color: #122973;
}
table {
width: 65%;
margin-left: auto;
margin-right: auto;
border-spacing:10px;
}
.menu {
text-align: left;
width: 20%;
}
.content {
width: 80%;
}
But I don't understand what .content is. Or .menu.
When I googled content, it showed me things like
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
Here's the solution image to my homework.
What part of that picture uses the .menu and .content rule?
In my homework it never said to give anything a class called content or menu.
.content is just a class selector - it selects any element on the page that has a class of 'content'.
Identifiers preceeded by a dot (.) are class selectors. They refer to the value of a class attribute of an HTML elmement.
The page creator can make up these names themselves, so googling them is pointless. 'content' probably refers to the content section on the page, but you would have to check the HTML to be sure. Judging by the image you added, this seems about right, there is a menu which is about 20% wide and a content section that occupies the rest of the space.
So if your assignment is to write the HTML, you just have to apply the right styles to the right elements by adding class="content" to the proper elements.
.content targets to a class selector.
HTML markup for:
<div class="content"></div>
This can be used many times inside of a page, unlike id which should be unique per page.
content and menu are the names of classes of elements within the HTML code of the page. Class names are prepended with a dot (.) when referenced in CSS.
This is a good resource for CSS selectors: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
the ".content" references to the class "content", where you have all that text, and you are defining in that class that you want the content box to be 80% of the size of the website.
I'd like some (not all) of my H2 headlines to have a left margin of 10px compared to the "regular" H2 lines.
I tried the below code which works but was wondering if there's a better/cleaner way to achieve this. Thanks
HTML
<h2 class ="marginleft10px">Blablabla</h2>
CSS
h2 {
color: #2970A2;
font-weight: 300;
font-size: 18px;
}
.marginleft10px {
margin-left: 10px;
}
Is there a rule that dictates which h2s you want to have a 10px margin? For example are they all child element of some type of element? If its totally random then what you are doing would be a good solution. Otherwise there is probably a better one. Could you post some of your HTML to give us context?
I have the following code:
<div class="wrapper">
<div class="location info">
<h3>Location</h3>
<h3>should be no stlye</h3>
</div>
<div class="skills info">
<h3>Skills</h3>
<h3>should be no stlye</h3>
</div>
</div>
I'm trying to style the first h3 element after an info class. I thought this should work, but it dosen't:
.info:first-child {
color: color: rgb(200,50,50);
}
Why isn't this working? How should I style the first element in . info without adding extra markup in the html?
You need a space:
.info :first-child
The first-child pseudo element describes the element itself, not the children of the element. So, without the space you are selecting elements with a class of info that are the first child of their parent.
The space specifies that you are looking for descendants of .info. Since you are looking for just direct children, you should use the child combinator - >, and probably also specify only h3 elements:
.info > h3:first-child
Edit: I only noticed the problem with the selector. As mentioned in other answers (+1 to user1479606), you have a typo in your style definition as well: color: color: ... should be color: ....
You're not far away, try this:
.info > h3:first-child {
color: rgb(200,50,50);
}
But instead of using something like this, I believe the best approach would be to add a meaningful class to the first h3 - this will make reading the CSS and markup much easier in the future and it will prevent unexpected behavior when editing your markup. For example:
.info-title {
/* your styles here */
}
Your css is not correct, you only need to specify color once. You also need to make a more slightly change to your selector:
.info > h3:first-child {
color: rgb(200,50,50);
}
Demo: http://jsfiddle.net/WSZcS/
I'm trying to style the first h3 element after an info class.
.info > h3 {
color: rgb(200,50,50);
}
If your h3 tag is not the first child element you can use
.info > h3:first-of-type {
color: rgb(200,50,50);
}