Include style one CSS class to another - html

Is that possible to include styles of one css class to another? I mean SASS #extends pretty much does a similar thing, but it also styles extended class, which is not required. See example:
<style>
.myclass1{
background:red;
}
.myclass2{
color:blue;
#extend .myclass1;
}
</style>
<div>
<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
</div>
<div>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
</div>
Posted example is inspired by article of CSS-tricks Web, but here everything is very confusing it is not working as it should. myclass2 should give myclass1 according to article. However, it is giving strange output. Am I heading in the right direction? or is the article wrong?
Update:
Question is only about the actual concept behind #extend of SAAS, and including other CSS class to another, and what is the difference?

CSS without pre-processors (SASS, LESS etc.):
.myclass1{
background:red;
}
.myclass2{
color:blue;
}
<div>
<p class="myclass1 myclass2">Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p>
</div>
<div>
<p class="myclass1">Hello, I am only of class 1 (my background is red)</p>
</div>
You can add multiple classes to the same element.

You can use a comma to match multiple selectors:
.myclass1, .myclass2 {
background: red;
}
.myclass2 {
color: blue;
}
<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>

SASS is a CSS preprocessor which basically means the SASS syntax gets compiled into plain CSS. The features that SASS offers such as #extend as well as establishing variables with the $ syntax etc. are only possible using SASS (not possible with CSS3)
That being said, you would be able to accomplish the result of the #extend feature of SASS in regular CSS simply by chaining classes together:
.blue, .green {
<your css here>
}

Related

Class inheritance with specific CSS naming

I can't really remember why this structure within CSS is used?:
h2.class-name
Seems that you could just write out .class-name and just give that the class for the h2:
<h2 class="class-name">Title thing</h2>
Unless the reason for it is if you cannot edit the HTML. So this would be it, right?:
<div class="class-name">
<h2>Title thing</h2>
</div>
I guess I'm just "fuzzy" on what the reasoning would be for that particualr CSS structure.
h2.class-name means, select all the <h2> elements that have the class 'class-name', consider the following:
p.red {
background-color: red;
color: white;
}
h2.red {
color: red;
text-decoration: underline;
}
<p class="red">
RED PARAGRAPH
</p>
<h2 class="red">RED HEADING 2</h2>
Notice that both the <p> and the <h2> have the class 'red', but its implementation is different for each element, so if a <p> has the class 'red', style it this way, and if an <h2> has the class 'red' style it that way.
There are lots of reasons someone might use that construct. The ones that spring to mind are:
To distinguish between members of the class-name class that are h2 elements and members of it which are some other kind of element.
To control specificity as h2.class-name is more specific than .class-name.
To make it clear to people reading the CSS what elements that class is supposed to be applied to
Unless the reason for it is if you cannot edit the HTML. So this would be it, right?:
No. That would require the use of the child or descendant combinators.
.class-name h2 {}

(S)CSS architecture: alternative backgrounds styling

I'm using 'component' approach to CSS as in SMACSS / ITCSS, I'm still scratching my head about styling sections with alternative (dark) background.
e.g. Stripe has regular (dark text on white) and alternative (white text on dark) sections.
As I understand there are options assuming HTML:
<section class="dark">
<h2>Title</h2>
<p>Text</p>
Action
</section>
Style in context of section, e.g.:
.dark h2, .dark p, .dark btn {
color: white;
}
But a) context styling is not recommended; b) where does one put the styles? (Harry Roberts argues that in component's file)
Create alternative-colored components with modifiers
And change the HTML, e.g.:
.title--alt-color {color: white;}
.text--alt-color {color: white; }
...
But a) it doesn't work when you don't know which components will go in there; b) more work of managing HTML.
Maybe there is a better way to handle this?
In a component based approach the ideal way to do this is to have a mapping ready between backgrounds and foreground colours in your style guide. It should be a one to one mapping that should apply to majority of your elements. Have CSS classes defined for the same.
Next have a wrapper container for all your components. Its purpose is to impart text colours to its wrapped components. So the approach is to have a background colour class for the section and then a foreground colour class for the contents that runs applies to wrapper but runs the style through all the contents.
Note: Specific colour overrides can always reside inside your components file for instance using a highlight on some text etc.
The library that is suggested in the comments does the exact same thing. There is a primary and secondary colour in the theme object. The primary applied to the section and secondary is passed on to the individual components as context. I suggest having it passed only to the components' wrapper.
A somewhat clever way to have classes defined is like
t-wrapper-[colorName]
Now this can be generic and colorName can come in as a context to your wrapper based on the background color
Hope this helps. Let me know if this answers what you need or you would need supporting snippets for the same.
What you're asking for is essentially to style a component within a section based on the section itself. Unfortunately this is impossible with CSS, as there is no parent selector in CSS. However, there is the inherit value, which allows you to style a component based on the rules defined by its parent - perfect for component-driven CSS.
In my opinion, the best way you can go about alternating background styling is to make use of the :nth-of-type pseudo-class on <section>:
section:nth-of-type(2n) {
background: #464646;
color: #fff;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
Considering :nth-of-type makes use of math to target elements, you can access literally any combination of elements you would like:
// Style every second element, starting with the first element
section:nth-of-type(2n - 1)
// Style every third element, starting with the second element (2, 5, 8, etc.)
section:nth-of-type(3n + 2)
This way, it won't matter whether you're using a component-driven approach or not, as you'll be able to alternate the styling directly off of <section> itself.
Elements that inherit an attribute from internal stylesheets (such as <a> tag colour) will unfortunately still be styled based on the internal stylesheet, rather than rules defined by their parent.
You can get around this by either using context-styling:
section:nth-of-type(n) {
background: #464646;
color: #fff;
}
section:nth-of-type(n) a {
color: #fff;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
Or alternatively (and preferably) making use of the inherit value to tell every <a> tag to inherit its color from its parent:
section {
background: #464646;
color: #fff;
}
a {
color: inherit;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
Hope this helps!
You can set alternating background styling using nth-child(odd) and nth-child(even) pseudo-classes on <section>:
body{
margin:0;
}
section{
padding:20px;
}
section h2{
margin:0;
}
section:nth-child(odd){
background:#f5f7f6;
color:#333;
}
section:nth-child(even){
background: #113343;
color: #fff;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>

:nth-of-type(3n+1) not working when different sibling present [duplicate]

Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not?
The Code (http://jsfiddle.net/YWY4L/):
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.
Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
Explanations and illustrations for the workaround are given here and here.
The draft CSS Selectors Level 4 proposes to add an of <other-selector> grammar within the :nth-child selector. This would allow you to pick out the nth child matching a given other selector:
:nth-child(1 of p.myclass)
Previous drafts used a new pseudo-class, :nth-match(), so you may see that syntax in some discussions of the feature:
:nth-match(1 of p.myclass)
This has now been implemented in WebKit, and is thus available in Safari, but that appears to be the only browser that supports it. There are tickets filed for implementing it Blink (Chrome), Gecko (Firefox), and a request to implement it in Edge, but no apparent progress on any of these.
This it not possible to use the CSS3 selector :first-of-type to select the first element with a given class name.
However, if the targeted element has a previous element sibling, you can combine the negation CSS pseudo-class and the adjacent sibling selectors to match an element that doesn't immediately have a previous element with the same class name :
:not(.myclass1) + .myclass1
Full working code example:
p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
I found a solution for your reference. from some group divs select from group of two same class divs the first one
p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}
BTW, I don't know why :last-of-type works, but :first-of-type does not work.
My experiments on jsfiddle... https://jsfiddle.net/aspanoz/m1sg4496/
This is an old thread, but I'm responding because it still appears high in the list of search results. Now that the future has arrived, you can use the :nth-child pseudo-selector.
p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }
The :nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers.
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
You can do this by selecting every element of the class that is the sibling of the same class and inverting it, which will select pretty much every element on the page, so then you have to select by the class again.
eg:
<style>
:not(.bar ~ .bar).bar {
color: red;
}
<div>
<div class="foo"></div>
<div class="bar"></div> <!-- Only this will be selected -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>
As a fallback solution, you could wrap your classes in a parent element like this:
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<div>
<!-- first-child / first-of-type starts from here -->
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
</div>
Not sure how to explain this but I ran into something similar today.
Not being able to set .user:first-of-type{} while .user:last-of-type{} worked fine.
This was fixed after I wrapped them inside a div without any class or styling:
https://codepen.io/adrianTNT/pen/WgEpbE
<style>
.user{
display:block;
background-color:#FFCC00;
}
.user:first-of-type{
background-color:#FF0000;
}
</style>
<p>Not working while this P additional tag exists</p>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
<p>Working while inside a div:</p>
<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
I found something that works
If you have a bigger class which contains something like grid, all of elements of your another class
You can do like that
div.col-md-4:nth-child(1).myclass{
border: 1px solid #000;
}
Simply :first works for me, why isn't this mentioned yet?

how to select a class which is children of many elements

<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

How can I prevent hardcoding of some attributes in HTML?

I have following statement:
<font color="#2B547E">
Now I don't want to hard code it in my html; instead I want to apply a css class. I don't want this color for all fonts in my page, only for a specific part. I tried the following:
<font class="xyz" >
But it's not working. I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.
How can I move that hard coded value to css?
If you can add a CSS class for this <font> element, you should be able to switch over to using a <span>:
HTML:
<span class="coloredText">text</span>
CSS:
.coloredText {
display: inline; /* will stop spans creating a new line */
color: #2B547E;
}
If you still find the span creates a line break, you can change the rule to
display: inline !important; - this will increase the precendence of this rule so it will take effect. I'm not sure if the use of !important is frowned upon by CSS-pedants, but it might help.
Should be:
HTML:
<font class="xyz">...</font> <!-- or any other tag -->
CSS:
font.xyz {color:#2B547E;} /* or just .xyz */
See also: Class and ID Selectors
First off, use a reset css to reset all your styles to a default of your choice.
I use this one, but there are others around : http://meyerweb.com/eric/tools/css/reset/
Then, write your css and use targeting to apply the styles to different elements
This link explains CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
<link rel='stylesheet' href='reset.css'>
<style>
#top p {
color: blue;
}
#bottom p {
color: red;
}
.black {
background: #000;
}
</style>
<div id='top'>
<p>This text will be blue</p>
<span class='black'>I have a black background</span>
<div>
<div id='bottom'>
<p>This text will be red</p>
<span class='black'>I have a black background too!</span>
<div>
You can use a combination like this:
<div class="xyz">Your content goes here...</div>
and the CSS can be:
.xyz {display: inline; color: #2B547E;}
This will solve the problem of new line and also give the desired color.
HTML
<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>
CSS
.xyz {
color: #66CD00; }
View a live example
I'm sort of lost as to what you can and can't do here ;) but I'll put this in incase
font[color="#2B547E"] {color: red;}
<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>
Unfortunately IE7 has problems with this but it does target if you use font[color] {color: red;} - This will of course not enable you to specifically target by existing colors if that's what you're after - but it will target them all to bring them in line if that's all you require, a mixture of the two might provide a decent enough fallback?
Your problem might be a case of CSS specificity, i cant tell from the details provided. if your style for spans is defined through an ID such as
#somediv span{ display:block}
That css will overwrite something like
span.myspan{display:inline}
because the ID style is more specific, you can solve this a few ways, first you can set the style inline in the html.
<span style"display:inline; color:#2b547e;">some text</span>
or you can make a class and use a more specific style by including the parent ID in the css
#somediv span.myclass{display:inline}
Be more specific with your selector, instead of just div, use div.class, or div.id
<div class="Foo">
Bar
</div>
div.Foo {
color:#2B547E;
margin:0; /* overriding the predefined styles in other sheet */
padding:0; /* overriding the predefined styles in other sheet */
}
replace margin / padding with whatever is causing the new line.
Also I'd always recommend not using style tags; such as Font. Your Html should use declarative only tags. Not to mention the Font tag is deprecated.