Efficient ways to apply different css to same class - html

So, I have a collection of div as following for My Page.
<div class="My_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
Then I have another page with same class= one and two.
<div class="Your_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
However, I am trying to apply different css to class= one and two based on what page they are in.
For example:
My_page:
.My_Page .one{width:100%;}
Your_Page:
.Your_Page .one{width:50%}
I have one css file which contains both codes.
For either pages, these two css markups are loaded and I feel like there must be more efficient ways to apply different css based on what parental div it is in.
Or am I doing it right?
Thanks

.page{ .... //common css for both page one and two}
.page .one{ width:100% .... //common for both }
.page .two{ .... //common for both }
.My_page .two{ width:50%;}
<div class="page My_page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>

You are doing it correctly, CSS is very lightweight and loading unused code is not overly bad. However if you feel the need to do so you could load page specific CSS files and then have a whole site file that is loaded for all pages.

You are doing it correctly -
.outerclass .innerclass { }
will apply the style changes to all instances of this specific scenario.

Since your outer div has a different class, you could use a child selector to do something like this:
.My_Page .one {
color: red;
}
.Your_Page .one {
color: blue;
}
In that example, elements with the class one would only be red if they were inside a parent element with a class of My_Page.
Edit after re-reading the question:
Now I see that you seem to already be doing this. Yes, that is fine. You're doing it right. You could also include a different style sheet on each page if you're very concerned about the size of the style sheet. But that's not really necessary in most cases.

Related

How to place many text elements side by side, that you see no difference between the text?

how can I place many paragraphs or div elements next to each other, that I see no difference between them? For example:
<div>
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
They are placed under each other, but I want them to be side by side, and please don't write me other ways, for example something like: 'you can write the text in one div'... :) I saw this question several times from other users, but they had a bit different problem like mine, so please answer me this question
Thanks
<div>
<span>hey, how ar</span>
<span> you?</span>
</div>
or
.text {
display: inline-block;
}
<div>
<div class="text">hey, how are</div>
<div class="text"> you?</div>
</div>
or
.container {
display: flex;
}
<div class="container">
<div>hey, how are</div>
<div> you?</div>
</div>
div is a block-level element, which means that it will take up the whole of a 'row' on the screen, unlike inline elements.
I'd suggest you have a read through of the MDN pages on these two categories to get a better understanding of this:
Block-level elements
Inline elements
Among the many ways of solving this (change divs to an inline element type like span, using flexbox, etc), one option is to force your div to be inline by changing their CSS:
.text1, .text2 {
display: inline-block;
}
You can do this in many ways. Here I'll be showing classic ways to do this.
using display:inline-block property of css.
.text1{
display:inline-block;
}
.text2{
display:inline-block;
}
using display:flex property of css.
html:
<div class="text-wrapper">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
css:
.text-wrapper{
display: flex;
}
There are several ways of accomplishing this. You could do it with CSS Flexbox, CSS Grid, CSS float, or you could change the display property on the DIV's.
As you have tagged your question with "Angular", it is very common to use the Angular Flex Layout package for positioning (https://github.com/angular/flex-layout). If you add this package to your project, you could solve it like this:
<div fxLayout="row" fxLayoutAlign="start">
<div class="text1">hey, how are</div>
<div class="text2"> you?</div>
</div>
Why don't you use bootsrap? This is a typical scenario for placing things side by side.
<div class="d-flex justify-content-center">
<p></p>
<p></p>
<p></p>
</div>

css reusable class understanding needed

I am using a 960 responsive layout from skeleton, i have their css stylesheet which i have to addon if i want to include class. After experimenting i managed to get the site i want, but not without having piles of unnecessary selections.
So for example, based on what u see my css reflect the selector .container.four.columns, that say if i add a banner class, in my css should i only do .container.banner or .container.four.columns.banner will be the best way?
Since i thought if i add a lot of reusable style classes to it the css selector will be very long if i go into each details.. Please advise as i'm trying to make my code look as clean and neat as possible but not sure the best selectors to use as when i tried shortcut like just .banner nothing happens and i must have at least .container.banner before it make the changes. Thanks
HTML:
<div id="content" class="container">
<div class="four columns banner">
<div id="banner_a3da" class="banner_img">
<img src="page_home/banner_A3DA.jpg">
</div>
</div>
<div class="four columns banner">
<div id="banner_fi" class="banner_img">
<img src="page_home/banner_FI.jpg">
</div>
</div>
</div>
CSS:
/* Base Grid */
.container .four.columns { width: 220px; }
.banner or .container.banner or .container.four.columns.banner { width:100% }
Well either ways are correct, but you can use more classes to select specific object in your case. But maybe you have some .banner in .container.three.columns.banner and he is for example 50% and you wanted it to be 50%, but with .banner you will select him and you will resize it to 100%.
To resume, with single selection you may affect some elements that you didn't wanted, becouse there are more elements with that class.
I don't know if that's just pseudo-CSS or what, but you do 'or' with a comma,:
.banner,
.container .banner,
.container .four.columns.banner {
width:100%
}
You also had a missing space after .container.
Does that help?

Identify div through css

I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}

Why do people use multiple ID selectors in CSS?

Why do people do this in CSS:
#section #content h1
{
margin:0;
}
When they can just do:
#content h1
{
margin:0;
}
for code like this:
<div id="section">
<div id="content">
</div>
</div>
and get the same results (at least in IE7 - my target browser, unfortunately). Is it just for specificity in the code? Code clarity to declare what you are referring to?
CSS files are generally designed to be reusable so that the same CSS can be used all over the website and can be applied to all pages in the application.
Targeting a very Specific node can be useful to prevent any surprising behavior.
Suppose you had this code as you said,
#content h1
{
margin:0;
}
<div id="section">
<div id="content">
</div>
</div>
Someone came after you and created another HTML page using the same CSS and the structure was this
<div id="content">
</div>
and you desire a different styling for the H1 on this page.
You can argue that even with this CSS
#section #content h1
{
margin:0;
}
if the new page consisted of the same structure,
<div id="section">
<div id="content">
</div>
</div>
well in that case it is easier to debug, in this example the structure is quite simple, but real life CSS tend to be complex.
If you (or anybody else) is doing it, you shouldn't be. You're just trying to hold together a poorly developed CSS structure.
Try your hardest to stick to this rule: IDs are for JavaScript, classes are for CSS.
You should never need multiple IDs in a selector since IDs must be globally unique in the document. This means your #section #content h1 is overkill since it includes 2 IDs.
Other types of selectors (classes, tag names, etc) are not unique, so you might need to string a few together to get the element you want. For example, #section .content p would be perfectly reasonable in many contexts.
You might not want all #content h1 to look the same.
In that case #content h1 might have an ancestor ID/Class that you would want to latch onto so you can change the style of the h1 for those instances.
For example:
#content h1 { /* style 1 */ }
#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }
The term you are looking for is "Specificity" best example ive seen to describe this is using a points based system.
You use multiple selectors so that you don't select sections that you don't want.
For example, taking your use case, we would have to expand it from a section and content div, to something slightly larger.
<div class="wrapper">
<div class="header">
<div class="content">
</div>
</div>
<div class="section>
<div class="content">
</div>
</div>
</div>
Now, without adding the extra specificity, you will grab all H1 tags in every content section of the page, but you probably don't want to do that.
It's not a problem to be non-specific in small files, but when you begin to reach into the hundreds of possible css interactions being very specific about what you are doing in the css can save you major headaches.

selective css (link tag) for div

Can I have a css tag on my page, that is applied selectively to some div element on that page only.
Say it has some entry like
* {
margin: 0;
}
I do not want this property to be applied on all the elements on that page.
You must assign id to the divs you want to apply css individually and seperately.
and you must assign class to a set of elements if you want to apply some css to that set collectively.
It will not apply on all elements in that page.
ID method:
#div{
margin: 0;
}
Class method:
.div{
margin: 50;
}
HTML:
<div id="div"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
If you are applying it to one specific div, but not to any others, you might as well put it in-line
<div style="margin:0"> ..... </div>
for this case you can do it
<div id="someId" style="margin:0"> </div>
If you're positive you're only going to be using it on one element, just use an inline style like other said:
<div style="margin:0;"> Your Content </div>
If you're going to be using it on more than once, make a class in CSS,
.nomargin {
margin: 0;
}
and then use it by calling that class:
<div class="nomargin"> Your Content </div>
This will ensure that you can make changes to all of these classes at once if you need to change something in the future. ALWAYS use an external style if there will be more than one element using it, it will save you so many headaches in the long run.