So I'll have the following markup:
<div id="content-sidebar">
<div class="entry">
</div>
<div class="sidebar">
Sidebar Content
</div>
</div>
It is styled with the following:
#content-sidebar{
float: left;
padding-left: 10px;
position: relative;
width: 580px;
text-align: left;
padding-right: 20px;
background: url(../_images/content-line.gif) top right repeat-y;
}
#content-sidebar .entry{
position: relative;
padding-left: 16px;
}
#content-sidebar .entry a:hover {
color: #5CB414;
text-decoration: none;
}
I also have markup that uses a different styling for the parent div WITHOUT a sidebar (just adjusts the width), but needs the same for the child .entry class.
<div id="content-nosidebar">
<div class="entry">
</div>
</div>
the content-nosidebar id needs some slightly different styling, but the .entry child selector is exactly the same.
#content-nosidebar{
padding-left: 10px;
position: relative;
text-align: left;
padding-right: 20px;
}
What selectors will tell it to use content-sidebar and content-nosidebar with the .entry class without having to use redundant code? Is #content-sidebar .entry, #content-nosidebar .entry{} the best way or is there another way to select these?
Thanks!
If .entry covers more elements than #content-sidebar .entry, #content-nosidebar .entry would, then without knowing the exact structure of your document you'll have to make do with selecting by both IDs explicitly.
Or you could cheat by using an attribute prefix selector, if you really don't want to modify your HTML, but I wouldn't recommend it unless you know what you're doing (it's often cleaner and simpler to modify your HTML to suit your selectors instead):
div[id^="content-"] .entry
The selectors you can use depends on what you want to do.
.entry {} will apply to the class in both containers. Any CSS share between the two should be added in the simple selector, which should be listed in your CSS.
From there, if you want to customize either column, or have CSS that only applys to one column, but not the other, you can use either #content-sidebar .entry{} or #content-nosidebar .entry{}.
If there are other places that you have an .entry class, and you want CSS that applies to both #content-sidebar and #content-sidebar, you can use the combined selector #content-sidebar .entry, #content-nosidebar .entry{}. In this context, it might make more sense to add a common class of .content to #content-sidebar and #content-nosidebar. This would allow you to use a selector of .content .entry, instead of having to shove those IDs into all your CSS.
<div id="content-sidebar" class="content">
<div class="entry"></div>
<div class="sidebar">Sidebar Content</div>
</div>
<div id="content-nosidebar" class="content">
<div class="entry"></div>
</div>
The CSS would make the most sense in the following order:
.entry {
/** CSS common to all .entry elements **/
}
.content .entry {
/** CSS common to all .entry element in all .content areas **/
}
#content-sidebar .entry,
#content-nosidebar .entry{
/** CSS common to .entry elements inside #content-sidebar and #content-nosidebar **/
}
#content-sidebar .entry{
/** CSS specifically for .entry elements inside #content-sidebar **/
}
#content-nosidebar .entry{
/** CSS specifically for .entry elements inside #content-nosidebar **/
}
The reason you build your CSS this was is for
Efficiency - Common CSS is applied globally instead of repeated
multiple times thoughout the CSS
Organization - Common CSS is listed
first, while more specific CSS for specific sections are grouped and
listed afterwards, dispute the CSS specificity of the selectors
making the order irrelevant.
Good luck out there. -Matt
Related
I have just started learning HTML and CSS and I am implementing all the techniques I have learnt. I have come across a problem where I have two images places under one id that have 2 different dimensions. However I don't know how to edit them separately.
This is my HTML code:
#main-header {
background-color: #453e32;
}
#main-header img {
height: 4%;
width: 4%;
}
#main-header h1 {
color: #F8D115;
padding-left: 1%;
font-family: Calibri;
}
<div id="main-header">
<img src="../resources/wsimplylogo.png" />
<img src="../resources/wsimply.png" />
</div>
When editing the image sizes I cannot edit one specifically and I don't know if I should create another id separately or what
Any help would be appreciated!
PS I've literally only just started!
When using the selector #main-header img you target all img tags within your div with the id main-header. This means, that you cannot target a specific image without using something a bit more sofisticated.
If you're just learning css and html, I would suggest you give each of your images a seperate id (or class).
BUT if you really want to learn, then you could use :nth-child() as a selector:
#main img:nth-child(1){
/*here be style of 1st image*/
}
For further reference, see https://www.w3schools.com/cssref/sel_nth-child.asp
Try to make use of adjacent sibling selector + css selector.
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
Also remove the closing </img> tag in your html. No need of it
#main-header {
background-color: #453e32;
}
#main-header img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
#main-header img+img { /*for the second image followed by image*/
width: 50px;
}
<div id="main-header">
<img src="http://lorempixel.com/100/100/sports">
<img src="http://lorempixel.com/100/100/food">
</div>
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.
This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 8 years ago.
I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:
<div class="main"></div>
with some styles:
.main {
background: red;
display: inline;
/* some other styles */
}
and I want to apply .another class to the div, but via its .main CSS.
.main {
background: red;
display: inline;
.another
}
.another {
width: 50px;
height: 100px;
}
I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?
Thanks
You can assign multiple class to that div. so you can write like this and can apply class.
<div class="main another"></div>
No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.
You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.
I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.
You can merge the two styles like:
.main.another {
background: red;
display: inline;
width: 50px;
height: 100px;
}
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
I'm using the <section> tag on several pages, but on ONE page I'm using an <aside> tag that is preceded by the <section> tag.
In the case that I have a <section> immediately followed by an <aside>, I would like to apply a width to both and have the section float left, and the aside float right.
Basically, if I have a <section> and <aside> I want the style to work like this:
section {
width: 500px;
float: left;
padding: 8px;
}
aside {
padding:8px;
width:400px;
float:right;
}
If I only have the <section> I want it to be like:
section {
padding: 8px;
}
Is there a way I can do this with either a conditional statement in CSS3, or a pseudo-class, without having to use JavaScript, custom classes, or separate CSS files?
This only works if the <section/> comes after the <aside/>:
<aside>content</aside>
<!-- if there is another node in between, use the '~' selector -->
<section>content</section>
In that case you could use aside ~ section or aside + section:
section {
padding: 8px;
}
aside + section {
width: 500px;
float: left;
}
In all other cases you'll have to use JavaScript because these selectors only work in one direction, top to bottom.
With CSS4 there might be a way using the Subject of a selector with Child combinator, but that's future. This selector was removed from the specification.