Class inheritance with specific CSS naming - html

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 {}

Related

Why is my class selector not overriding tag selector?

So I've been coding for a week and I have googled for 30 min trying to find a solution. So excuse me if it's already been asked. I'm trying to write a summary of what I've learned after each lesson but it's not working!
<body> <center> h1> Module 40 </h1> </center>
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
</body>
And my CSS is this:
p
{
font-size: 15px;
}
/*****class selector*****/
.p1
{
font-size: 20px;
}
Shouldn't the class selector override the tag selector? Font size 15px is being applied to the whole text. It works if I add class="p1" to the second paragraph. But shouldn't this work if I add it to the div? Isn't that the purpose of having a div?
Must be .p1 p
p
{
font-size: 15px;
}
/*****class selector*****/
.p1 p
{
font-size: 20px;
}
<p>In this module I have learned on how to use the tag <!-- <div> ---> the purpose of this tag is to create a specific group whether it is images, headers, paragraphs, etc, which you can attribute seperate properties to so it is unaffected by tag selectors. by adding a class or ID to it. </p> <br>
<div class="p1">
<p> Like for example this paragraph is inside a div called "p1". And I have added a specific font-size for this one compared to the previous paragraph which is affected by a <strong> tag </strong> selector instead of a <strong> class </strong> selector.
</p>
</div>
This happens because of Specificity. Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
You can find one of the most useful documentations here -
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
No because your paragraph is a child of .p1
All children inherit the styling of their parent (font-size:20px), but have the ability to override this (which you did by setting the paragraph styling to font-size: 15px)
You can read more about inheritance in CSS here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Your <p> tag is child of <div> tag, that's why its not working. Try adding the class to <p> tag

Should I give a very specific class name to a div and then select it with class selector or very generic name and select it with descendant selector

Imagine I have a div with children div and grandchildren divs like this:
<div class='1'>
<div class='2'>
<div class='3'>
<div class='4'>
<p class=''>Username</p>
<p class=''>Description</p>
<p class=''>Views</p>
</div>
</div>
</div>
</div>
Let's say I want to give a class name to the first <p> element so I can apply some CSS to the first <p> element only.
Should I give it a generic class name like 'username' and then select that username using descendant selector like this:
.1 .2 .3 .4 .username {
color: black;
}
Or should I give it a very specific class name like 'profile-page-username' and select it with the class selector like this:
.profile-page-username {
color: black;
}
If I understand it correctly, if I use the first way, I can give class name of 'username' to as many elements as I want and still apply different CSS rules to each one of them because I'm not selecting all elements with 'username' but only the element with 'username' that is children to the previously mentioned elements.
I'm wondering if one way is better/more used/more conventional than the other.
In your example, I would create a specific class name.
Your question falls into the lines of discussion around CSS Scoping. By your example, it looks like you have a specific p that is fairly far down the line of child elements that you want to apply a style to. Whenever I find myself targeting an element so far down where I need to start doing .1 .2 .3 .4, I usually create a separate class for that element. You can still apply a generic style to your p's in your css like below so it will apply to every other p.
p {
color: black;
}
.specificP {
color: green;
}
<div class='1'>
<div class='2'>
<div class='3'>
<div class='4'>
<p class='specificP'>Username</p>
<p class=''>Description</p>
<p class=''>Views</p>
</div>
</div>
</div>
</div>
Why?
Mostly for readability and maintainability. It's a lot easier to ctrl-f on a specific class name than it is to traverse down a tree of child elements to find where your style is applied.
You shouldn't use a class if you want to apply the css only to one element.
Use a individual id instead, like:
<p id="yourID"> username </p>
<p id="yourSecondID"> username </p>
etc...
Classes are commonly used if you want to apply some CSS to multiple HTML elements.
In your case, your CSS would look like:
#yourID{
//Some css
}
#yourSecondID{
//Some more css
}
etc...
if you are going to keep the styling same for the username throughout the website, you should specify it specifically. like so-
HTML File
<div class='1'>
<div class='2'>
<p class='profile-page-username'>Username</p>
<div class='3'>
<div class='4'>
<p class='profile-page-username'>Username</p>
</div>
</div>
</div>
CSS File
// for the first p attribute
.profile-page-username{
color: red; // all elements with this class will have the same styling
}
But if you want to style it differently at different places you should use the former. like so-
HTML File
<div class='1'>
<div class='2'>
<p class='username'>Username</p>
<div class='3'>
<div class='4'>
<p class='username'>Username</p>
</div>
</div>
</div>
CSS File
// for the first p attribute
.1 > .2 > .username{
color: red;
}
// for the second p attribute
.1 > .2 > .3 > .4 > .username{
color: blue;
}

(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?

CSS: Selectors Property Inheritance

I'm new to css so I have this question:
Having this html document:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
The text property from h1 tag are inherited from the style class, from the h1 style or from both?
Expanding further on what Harry said in the comments there a multiple ways to define 'style' to an element using CSS.
Inline Style - <h1 style="color:blue;">
External Stylesheet
Internal Stylesheet
In the above question you're using an Internal Stylesheet. This meaning you've added <style> tags to your head of the document and then added the styles within there.
There are also several ways to change the style of an element using any of these methods. You can:
Style an object using an ID selector (#) (see example 1)
Style an object using a Class selector (.) (see example 2)
Style an object using the Tag (h1) (see example 3)
Example 1
#title { color:black; }
<h1 id ="title"> This is the title </h1>
In this example you're able to identify the H1 tag using an ID, allowing for that single object to be styled using the hash key.
Example 2
.title {color:black;}
<h1 class="title"> This is the title </h1>
In this example you're able to identify a class of objects or singular objects, you can also define the class to a certain tag {h1.title} so you're identifying that title belongs to the h1 tag and will change the colour black.
Example 3
h1 {color:black;}
<h1 class="title"> This is the title </h1>
In this example you can identify all tags and change them as you please. This will take all h1 tags in the document and make the colour of the writing black regardless if it belongs to a class or not.
Summary Example:
To summarise you can incorporate all three of these techniques to change various objects and to define specific elements to specific styles. So when you use multiple of these techniques it will read all only for the purpose of the operation: so a class selector will look for classes, tag selector will look for a tag etc etc. Look at this JSFiddle
h1 {padding:20px;}
h1 .title {color:green;}
#subtitle {color:red;}
<h1 class="title"> TITLE GOES HERE </h1>
<h1 id="subtitle"> This is a subtitle </h1>
In this example it'll add padding to both elements but only add the color to the element with the specific selector.
I hope this clears things up for you.
The text property from h1 tag are inherited from the style class, from the h1 style or from both?
There isn't a text property in CSS - so none of the above.
The only place that any property on your heading will be inherited from is the body element. In CSS inheritance is when the value of the property is inherit (e.g. font-style: inherit) and it copies the parent from the parent element in the DOM.
The only selectors you have in your stylesheet are type selectors, and the only one that matches the <h1> is the h1 selector, so the rules in that ruleset will apply to the heading.
If you had a class selector that matched the <h1> (which would require it to be a member of that HTML class (via a class attribute), then it would overwrite any rules from the type selector since a class selector is more specific.