Can someone explain the difference for these two CSS selectors?
.work-container . h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
What is the extra dot in the upper definition?
.work-container h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
Cases
Selector start with dot
.class_name signifies class name
Two dotted selector separated by space
.outside .inside
means element with .inside class descended from an element with class .outside
Two dotted selector without separation
.name1.name2
means element that has both class name1 and name2
eg: class="name1 name2"
Related questions:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.
If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).
Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.
. in CSS means it is a class and it can be applied to many elements.
# in CSS means it is an ID and it can be applied to one element per page.
Without the either, it is a tag, targets all the elements with the tag name.
In your syntax, .work-container . h3 is actually error. The . should have been either , or as BoltClock said, >, which says the direct descendant operator in CSS.
. says its class
# means its an id
and if there is nothing but the selector, then it is a tag
. in CSS means it is a class & it can be applied to many elements with use space between classes
For example:
<h3 class="class1 class2 class2">Heading</h3>
# in CSS means it is an ID and it can be applied to one element per page.
For example
<h3 id="idname1">Heading</h3>
Related
if I add a css class to my div, it will be overwritten with v-slot-tradeMatrixLayout. How can I specify this class specifically in my CSS file so that only this is called. The tradeMatrixLayout is given to a VerticalLayout.
This will be examined in chrome
<div class="v-slot v-slot-tradeMatrixLayout">
And this is my CSS file
.tradeMatrixLayout{
margin-left: 15px !important;
}
How can the div call my specifically written class?
The class attribute can receive multiple CSS classes by using their name and separated by a space, as seen here. For your case you can add it like:
<div class="v-slot tradeMatrixLayout">
In this example, you are adding 2 classes: v-slot and tradeMatrixLayout.
if v-slot is overwritting whatever you are trying to set with tradeMatrixLayout, then it means that you have to play with Specificity. In summary, some rules have more importance than others, even if you use !important (imagine you have 3 classes that use !important, which one should be used?). The higher the specificity, the more important is the rule.
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., > #example).
if you want it to have more specificity, either change your CSS to:
div.tradeMatrixLayout{
margin-left: 15px;
}
of add it using an id:
<div id="myDiv" class="v-slot tradeMatrixLayout">
div#myDiv.tradeMatrixLayout{
margin-left: 15px;
}
You can also use javascript to add the class by manipulating the DOM.
function myFunction() {
var el = document.getElementsByClassName("v-slot");
el.classList.add("tradeMatrixLayout");
}
it should be end with your class
[class$='tradeMatrixLayout']{
color: red;
margin-left: 15px !important;
}
Just try above code it will work for you
The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class
I don't fully understand what you clearly want though? What you have seems okay?
v-slot v-slot-gewerkeMatrixLayout
This is referencing to these 2 classes, It cannot use the same elements from both as it will be overwritten. But if you have 2 different instructions it should work
You could just specify the class your in your CSS like this
.v-slot-tradeMatrixLayout {
margin-left: 15px !important;
}
Just add another CSS with that CSS class (v-slot)
Like:
.v-slot{
margin-right:5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
And your html will look like
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
.v-slot{
border: 3px solid blue;
height: 50px;
width: 50px;
margin-left: 5px;
}
.v-slot.tradeMatrixLayout{
margin-left:50px
}
<div class="v-slot"></div>
<div class="v-slot tradeMatrixLayout"></div>
I'm new to CSS and want to learn how to make webpages. While learning on Codecademy there was a lesson for classes and Ids which got me confused.
How should the classes be setup and does it make a difference if it's like this
.content h1 {
}
or
h1 .content {
}
Firstly, the spaces in between the CSS selectors .content and h1 matter, meaning, if you are trying to make a CSS rule specifically for h1 elements with a class of content, then the rule needs to be formatted as h1.content.
Secondly, a CSS rule with a space in between selectors (e.g. div .bold) is a combinator known as a descendant selector, and in the example div .bold { font-weight: bold; }, it would mean that any elements with class bold descending from any div element would have a bold font weight style applied.
element.classname mean you are targeting the tag having a class as classname.
element .classname or .classname element mean you are targeting the html element having class classname which is a child/descendent of tag.
I need to change size, color, and weight of every first letter of each word. I am not talking about Capitalize each first letter. I mean that target first letter and apply style according to my choice.
: Click Here to see example about which i am talking.
You should wrap every single word with a tag and use ::first-letter CSS selector .
Also, note that this selector does not work on inline elements. If you want to use it with an inline element, such a <span>, make sure you set display:inline-block (see here for more details: https://stackoverflow.com/a/7631782/11298742)
example :
p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
color: red;
font-weight: bold;
}
<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>
In Twitter Bootstrap there's the following CSS class selector:
.show-grid [class*="span"] {
margin-bottom: 5px;
}
Does this apply margin-bottom: 5px to any span class after show-grid?
CSS3 Specification: Selectors Level 3
[att*=val]
Represents an element with the att attribute whose value
contains at least one instance of the substring "val". If "val" is the
empty string then the selector does not represent anything.
And according to your question:
Does it means that applies margin-bottom:5px to any span class after show-grid?
No, it applies margin-bottom: 5px to every element that is descendant to any element marked with show-grid class and which class contains span.
[attr*=value] is the sub-string attribute selector - its new in CSS 3 and is supported in IE 7+
What you posted will add 5px of bottom margin to an element that has a class containing the sub-string span and is also a descendant of an element with the class .show-grid
I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.
For example if I create
h1 {
font-size:18px;
color:#FFFFFF;
font-family:Arial, Helvetica;margin:0;
padding:0;
}
h2 {
font-size:18px; color:#000000;
font-family:Arial, Helvetica;
font-weight:normal;margin:0;
padding:0;
}
I can repurpose the h selectors with something like
.whatever h1 {
color: #000;
font: 2.0em arial, sans-serif;
background-color: #fff3ea;
margin: 50px 0px 0px 50px;
}
.whatever h2 {
color: #000;
font: 1.7em bold arial, sans-serif;
background-color: #fff3ea;
margin: 25px 0px 25px 75px;
}
If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.
Any thoughts?
This is called specificity.
It's a key feature of CSS which means properties in the more specific selector (.whatever h1) will override properties in less specific ones (h1). It allows you to set general styles for most of the elements on the page (e.g. all h1 elements), and then change the properties of a small subset of those elements using a more specific selector that identifies, for example, only the h1 elements inside another element whose class is whatever:
HTML
<h1>I'm green with envy</h1>
<h1>And so am I</h1>
<div class="whatever">
<h1>Because I'm rather special</h1>
</div>
CSS
h1{
color: green;
}
.whatever h1{
color: blue;
}
RESULT
The CSS selector .whatever h1 means "any h1 element inside another element with a class of whatever". You could also give the h1 element its own class to achieve the same effect; you just write the CSS slightly differently to reflect the fact that the h1 element you're targeting now has its own class:
HTML
<h1 class="whatever">I'm special</h1>
CSS
h1.whatever{
color: blue;
}
Always try to give your classes and IDs meaningful names that refer to the element's role within the page, rather than its colour or other attributes. i.e. It is much better to use ".introduction" instead of ".bigredtext" or ".whatever". That way, if you change the colour of your intro text to bright blue, you don't have to rename the class in your CSS and HTML, and everything in your HTML will read better too. (This is what people are talking about when they mention "semantics" and "semantic naming conventions".)
How specificity is determined (simple rules to remember)
User agents (web browsers) use a formula to calculate how specific each selector is and which should take precedence over the other. In very simple terms, from less specific to more specific:
Selectors with only the name of the element (e.g. h1) are the least specific of all
Selectors with a .class are more specific than selectors with no class
Selectors with an #id are more specific than selectors with a .class
Selectors lower down in a stylesheet take precedence over earlier identical selectors
Those are the four main rules worth learning about specificity, and they will cover most simple use cases. These two additional rules aren't related to specificity, but they're worth knowing too:
Inline styles such as <h1 style="color: blue"> will take precedence over external rules declared separately in external stylesheets or inside <style> tags. You probably shouldn't use inline styles, but it's worth knowing this just in case you come across them.
Properties within a selector that use the !important flag "trump" everything and can't be overruled. Likewise, you probably shouldn't choose to use the !important flag, but there are times when you may be forced to.
How specificity is really determined (how to calculate it precisely)
Of course, it gets a little more complicated than the above (but not by much) when you start chaining classes, IDs, and elements together, which is why it can be helpful to learn how to calculate specificity precisely rather than working on intuition alone, as it will save you a lot of time when your stylesheets get bigger and more complicated.
If you'd like to learn more, Smashing Magazine has a piece titled "CSS Specificity and Inheritance" that's worth a look. They reference Andy Clarke's famous Star Wars Chart, which might be an easier way to visualise specificity if you're familiar with Star Wars, but it will probably just make things even more confusing if you're not! (Click the image below to read more on Andy's site.)
You faced overriding the selectors.
example:
<div class="one">
<div id="two">
<h1> This is H1 text </h1>
</div>
</div>
so you have set H1 to FFF - white color by:
h1 {
color:#fff;
}
now we do first override ( using ID ):
div#two h1 {
color:#888;
}
and the third, notice you don't have to put current element, you can set it for each element with given class:
.one div#two h1 {
color:#000;
}
so in the end we have black text color.
The raw ones are to set "global" styling. The nested ones are to give exac styles to given elements.
Also you can use chaining class/id selectors for <div id="one" class="two three four"> you can select it using div#one.two.three.four - without spaces