I am very new to bootstrap and I would like to customize it. I am confused when I see '>' and '&' character. What does that mean? Is that present in less documentation. Is that some sort of nesting? Please see sample code below.
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: #navbar-inverse-link-active-bg;
color: #navbar-inverse-link-active-color;
}
}
This might be the easiest question, don't hate me for this. Thanks folks.
In CSS, the ">" character means that only "first nested" elements will be targeted ("direct child" elements).
that means in the following scenario:
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
then in CSS #a > div would only target <div id="b"> and NOT <div id="c">
without the > character, #a div would target both "b" and "c".
As for the & character in LESS:
The ampersand selector is most commonly used when applying a modifying class or pseudo-class to an existing selector:
a {
color: blue;
&:hover {
color: green;
}
}
The inner selector in this example compiles to a:hover. Without the &, it would compile to a :hover (a descendant selector that matches hovered elements inside of tags).
Read more at http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/
The > character refers to the direct children of certain element.
The & character is used in SASS for reference of the parent selectors.
Related
I'm working with some CSS and wondering why the following piece doesn't work:
.container:not(#topic-title>.container)
Is there anyway else I can achieve the same thing? I'm open to JavaScript solutions.
You could use this selector :
:not(#topic-title) > .container
.container {
height:20px;
}
:not(#topic-title) > .container {
background:green;
}
<div id="topic-title">
<div class="container">parent #topic-title</div>
</div>
<div>
<div class="container"> parent not #topic-title</div>
</div>
Take a look at the spec for the :not pseudo class: (bold is mine)
The negation pseudo-class, :not(X), is a functional notation taking a
simple selector (excluding the negation pseudo-class itself) as an
argument.
where
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
Hence #a>.b is not a simple selector and that's why the selector .b:not(#a>.b) doesn't work.
Here's an example with background-color, a margin example would be analogous. The idea: set a default page-wide, then cancel for instances where you don't want it.
.container {
background-color: red;
}
#topic-title > .container {
background-color: inherit;
}
<div>
<div id="topic-title">
<div class="container">A</div>
</div>
<div class="container">B</div>
</div>
<div class="container">C</div>
I'd like to match when /(\sclassName|^className)/ is satisfied, but when selecting css. Hypothetically I would use like:
[class(^|\s)='className'] {
font-size: 5000px;
}
I've found this resource, which is very nice: The Skinny on CSS Attribute Selectors, but it doesn't mention this use case.
I just want to match "icon-" in the following 2 examples, but not the 3rd.
Here, this can be achieved with [class^='icon-]
<div class='icon-something another-class'>
Here, this can be achieved with [class~='icon-'], but this does not match when 'icon-' is at the very beginning of the class string:
<div class='another-class icon-something'>
I do not want to match this, with -icon in the middle of a string. I believe *= will match this one, as will |= :
<div class='another-icon-class another-class'>
You'll need to use two separate selectors with the same rule. CSS selectors don't really support alternation.
[class^='icon-'], [class*=' icon-'] {
/* ... */
}
div {
color: red;
}
[class^='icon-'], [class*=' icon-'] {
color: green;
}
<div class='icon-something another-class'>should match</div>
<div class='another-class icon-something'>should match</div>
<div class='another-icon-class another-class'>should not match</div>
You can use the following selectors to select any element whose class either starts with "icon-" or contains " icon-" (note the space at the start):
[class^="icon-"], [class*=" icon-"] { ... }
JSFiddle demo.
Would you please explain me the difference between these two CSS classes syntax:
.element .symbol {}
and
.element.large .symbol {}
I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?
.element .symbol
means .symbol inside .element
.element.symbol
means .element that has the class symbol as well.
So,
.element.large .symbol
means .symbol inside .element that has the class large as well.
I think you got a slight misunderstanding what the first one means.
.element .symbol {}
Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.
<div class="element">
<div class="symbol" />
</div>
In this example your first CSS entry would affect the <div> tag in the middle.
Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.
<div class="element large">
<div class="symbol" />
</div>
So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.
If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:
.element, .symbol {}
Edit: By request the link to the documentation of the CSS selectors.
Using
.element.large
refers to an element with both classes:
<div class="element large"></div>
rather than a descendant of an element:
.element .large
meaning that in:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
is 'receiving' the styles.
Basically, being separated by a space implies two elements with a descendant relationship.
You would use .element .symbol this where you have an element inside of another element. For example:
<div class="element">
<i class="symbol"></i>
</div>
If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:
<div class="element large">
<i class="symbol"></i>
</div>
In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element">.
In general, each part of a selector applies to one HTML element.
table[border].clname means a table with a border attribute and a class of clname, while table [border] .clname means an element with class clname, in an element with a border attribute, in a table.
(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)
Without whitespace, you are simply more specific with the selector. Because classes can appear several times in the html dom. But two or more classes in one element is rarer and therefore more precise.
Selectors with a whitespace (.a1 .b2) say search for the class a1 and see if there is a child or child-child element with the class b2 in this element.
An even higher degree of accuracy can be achieved with the >selector (.a1 .b2 > span). This states that only span elements should be taken into account which are direct children of the class .b2 located within an element with the class a1.
.a1 .b1 {
color: green;
}
.a1.a2 .b1 {
color: red;
}
.a1.a2 .b2 {
font-style: italic;
font-weight: bold;
}
.a1.a2 .b2 > span {
color: orange;
}
<div class="a1">
<div class="b1">Hello France</div>
<div class="b1">Hello Spain</div>
<div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
<div class="b1">Bye France</div>
<div class="b1">Bye Spain</div>
<div class="b2">
Bye
<span>World</span>
</div>
</div>
How can you redefine a class if its in another specific class?
div.cls {
color:blue;
}
div.tst > div.cls {
color:red;
}
<div class="cls">test</div> // text color = blue
<div class="tst">
<div class="cls">test</div> // text color = red
<div>
<div class="cls">test</div> // text color = blue
</div>
<div>
How to make the last one also red?
jsfiddle
http://jsfiddle.net/gpD7H/
I used this, it work for me:
.name-of-parent * { color: red; }
Use the descendant selector [W3C]: div.tst div.cls
> is the child selector [W3C] and will only match children of an element.
Exactly like that. However, your second division won't be red text because it's also contained within another division. The > selector only matches to the immediate children under the element matched before it, so it's looking inside div.tst at only one level. Try removing the > from the selector:
div.tst div.cls {
color:red;
}
Your updated jsFiddle
Should this work am I going crazy?
.project.work:first-child:before {
content: 'Projects';
}
.project.research:first-child:before {
content: 'Research';
}
<div class="project work">
<p>abcdef</p>
</div>
<div class="project work">
<p>abcdef</p>
</div>
<div class="project work">
<p>abcdef</p>
</div>
<div class="project research">
<p>abcdef</p>
</div>
projects:first-child works fine, research:first-child doesn't stick. Any ideas?
Demo It doesn't work, but whats the best way to achieve this?
:first-child only selects the first child of its parent. Nothing else.
As mentioned in a few of my other answers on the site (1 2 3 4), there is no :first-of-class pseudo-class. If you are looking to apply styles to the first of each class of your div elements, a solution is to apply the styles to all children of that class, and a general sibling selector to undo the styles from subsequent siblings.
Your CSS would then look like this:
.project.work:before {
content: 'Work';
}
.project.research:before {
content: 'Research';
}
.project.work ~ .project.work:before,
.project.research ~ .project.research:before {
content: none;
}
From the specification:
Same as :nth-child(1). The :first-child pseudo-class represents an element that is the first child of some other element.
.project.research is not the first child of its parent.
I believe you want this CSS:
.project.work p:first-child:before {content:'Projects';}
.project.research p:first-child:before {content:'Research';}
or
.project.work > p:first-child:before {content:'Projects';}
.project.research > p:first-child:before {content:'Research';}
Updated fiddle
That matches the first child of an element with the classes "project" and "work" (or "project" and "research"). You don't have to use p:first-child if it may not be a p element, you could use *:first-child instead.