I am trying to create a stylesheet for a react app and I can't seem to use selectors.
For example, I have a reusable <ul> that goes in multiple places. I want to have the <li>'s look a certain way when they are in the <ul className="abc">, and a different way in <ul className="xyz">.
Normally I would make a style like this...
.abc > li { styles... } .xyz > li { styles... }
But it doesn't work. What is going on and what's the simplest way around it?
Related
I was asked to take over a company's website built using a builder I'm not familiar with.
I need to remove a few buttons, tabs, etc. (The site needs to be rebuilt.) Until we get the green light I'm having to remove items here and there with CSS.
I was able to remove the following button
"Rental"
with the following:
a.search-btns[data-search=rental] {
display: none;}
But I trying to remove this tab
<li class="tab"> Rental</li>
does not work using this method.
a.tab[data-tabtitle=Rental Equipment] {
display: none;}
I know just enough about CSS to be dangerous. Can someone help with this?
Thanks in advance!
Change css code to:
li.tab a[data-tabtitle="Rental Equipment"]
{
display: none;
}
In some CSS contexts, spaces are optional. For example, in a property declaration display:none; is the same as display: none;. However, as you can see in your selector scenario, they do matter.
a.tab[data...] is selecting for all links that have the class .tab and the data-attr you specified. For your scenario to work, you want something like: tab > [data...]
.tab > [data-tabtitle="demo"]{
display: none;
<ul>
<li class="tab">hidden</li>
<li class="tab">not hidden</li>
</ul>
I suggest checking out some documentation on CSS selectors to learn more.
https://www.w3schools.com/cssref/css_selectors.asp
Try changing it to double quotes.
a.tab[data-tabtitle="Rental Equipment"]
I'm using a WordPress theme where the CSS for <li> elements is substantially different from the <h2> tags I want to use for a numbered list.
I tried nesting the numbered list like <h2><ol><li>Item one</li></ol></h2> but the theme just strips out the nesting making them separate from each other.
I'm really weak on CSS and styling, but I'm assuming there must be a way to cause my <li> marker tags to inherit their styling from another style?
Is there a way to say something like <li marker> = <h2> whereby it copies the style identically? I'd rather not have to look up and add each marker style element manually in case I ever change themes?
I'll initially need to do this inline, as I don't want to change my style sheet for fear of messing up many other pages that might be using the <li> tag.
Thank you.
I don't see any way to do this in raw CSS without a preprocessor like SASS. Only option I can think of is for all the styles you care about, like color, inline color: inherit to override li values and inherit the parent values from h2. For example:
Theme CSS
li {
color: red;
}
h2 {
color: purple;
}
HTML (Inline style inherit to use h2 color instead of li color)
<h2><ol>
<li style="color:inherit">Hello</li>
</ol></h2>
Result:
"Hello" is purple because the inherit tells the HTML to use the parent style (h2) instead of the style from the stylesheet (li). This only works because an inline style has higher precedence than anything from the CSS file.
JS Fiddle example: https://jsfiddle.net/Chris_Hayes/ocmkge8n/
Well I'm watching videos about oop css with bem. I didn't understand one thing. I have a media object and I use it everywhere like in navbar and content and footer etc. So how shall I change the media object and insiders. I guess 3 ways there are.
1 - I can catch inside other blocks grandchild chooser
it will like ".navbar .media".
This way makes me worrying because of grandchildren is making slow and complicated I think. Don't think about only .media. I have to select media-item etc etc...
2 - I can give another class to .media like .navbar together
it will like ".navbar.media".
This way need more classes to html so it makes me thinking.
3 - I guess there is no third option if there is please let me know :) Which way I shall do.
Thank you already.
You should add an extra class, navbar__media (that's a double underscore for descendant), and add that to the media elements inside of the navbar.
A rule of BEM/OOP CSS is that an element should always have their style defined by the classes they have, and not based on where they are in the DOM.
For reference: http://getbem.com/naming/
Example:
<div class="navbar">
<div class="media navbar__media"></div>
</div>
<div class="media"></div>
With this css:
.navbar {
background: #00f;
}
.media {
background: #f00;
}
.navbar__media {
background: #0f0;
}
I'm trying to pickup and understand the reasoning behind CSS naming conventions such as BEM or SUITCss. I'm having a hard time understanding the value of descendent class names in the presence of SCSS.
For example:
<ul class="menu">
<li class="menu__item"></li>
<li class="menu__item"></li>
<li class="menu__item">
link
</li>
</ul>
.menu {
.menu__item {
//styles
.menu__item__link { //styles }
}
//or alternatively this syntax..
&__item { //styles }
}
With the ability to nest rules in SCSS, I don't see the compelling reasons for me to include the ancestor class names in my code. Above I have defined styles that should only be used for an "item" that is inside of a "menu", using descendant class names. However, the nested structure already communicates this! The rules for menu__item would only apply to an item under a menu anyway, so why do I need include that in the class name?
Why not:
<ul class="menu">
<li class="item"></li>
</ul>
.menu {
.item {//styles}
}
I understand that the descendant naming convention is more explicit and perhaps more future friendly. I argue, however, that it is only more explicit in the html. If I wanted to consult how to build this "menu" module, I could just consult the CSS and see just as clearly how a menu has items nested inside.
I guess one possible advantage is that I could write my css un-nested, like so:
.menu { //styles }
.menu__item { //styles }
.menu__item__link { //styles }
And then use a "menu__item" anywhere and it would still be explicit in the class name that this was the styling of an item under a menu..but then why define it as a descendant of a menu at all then? (Another advantage, I suppose, is shorter CSS identifier strings if things aren't nested)
It seems to me that if a class name is to be used as a descendant under another, then nesting in SCSS achieves this and presents that logic clearly. Why would this BEM syntax be necessary then?
I'd like to hear someone explain the reasoning of this type of convention. I want to adhere to so called best practices, but it's hard for me to do so blindly without fulling understanding a convention.
Several remarks.
1/ First,
.menu {
.menu__item { /* ... */ }
//or alternatively this syntax..
&__item { /* ... */ }
}
The two SCSS syntaxes are not equivalent. The first one uses a cascade (".menu .menu__item"), not the second one (".menu__item"). Only the second one is BEM compliant.
2/ Why not a cascade:
.menu {
.item { /* styles */ }
}
BEM allows scalability. When we write CSS, we focus only on one small context: the block. And each block can be reused many times.
But cascades are not context-free. In your example, there is a block "menu" that contains an element "item". The context of the element "item" is the block "menu". But the cascade breaks the context separation for the sub-blocks. A prefixed BEM syntax allows nesting blocks, the cascade doesn't. For example:
<ul class="menu">
<li class="menu__item"></li>
<li class="menu__item">
<div class="other-block">
<span class="other-block__item"></span>
</div>
</li>
</ul>
Notice the element "item" in the sub-block. With a cascade instead of a prefix, it would be styled by a rule that would target the elements "item" of the parent block.
3/ This class name is not BEM compliant:
.menu__item__link { /* styles */ }
Elements don't provide any context. Only blocks provide contexts. The context of a an element is the context of its block. So, "link" is not a descendant of "item" in the BEM tree. The two are brothers, independently of their situations in the DOM tree. You should use:
.menu { /* styles */ }
.menu__item { /* styles */ }
.menu__link { /* styles */ }
Lets start with idea of BEM or SMACSS.
The main task any methodology resolves is structuring and modularize your code.
For example BEM use following abstractions:
Block - independent part of UI (like feedback form),
Element - part of block cant exist without block (like feedback form button),
Modificator - helper that let you modify block or element ( like make button bigger or smaller).
SMACSS use different abstractions : Module, Layout, Base, State, Theme.
To clearly got the idea, imagine your html page contains from logic layers,
1) BASE - you add css resets, define H1, H2 ... font sizes, define colors. So in base you put things than should be changed.
2) LAYOUT - adds grids, or separate page in regions. 3) Module - independent content item
3) STATE - very close to BEM modificator but connected with some action with module, like is_hided, is_collapsed
4) Theme - may be used for BASE override.
So to separate this abstractions you have to follow some naming convention , so you could from first look understand what does this class do. If you follow naming convention its also much easier to maintain you project6 its easily to explain new team members how code organized and how to write new code that looks like written by one person.
Its extremely important in large scale projects with large teams.
Plus, naming convention helps you to decrease number of descendant selectors, that improve performance.
My website has two different css style documents. The first is specifically for the index page, which uses lists to do the tabs at the top for a link bar between the title and the rest of it. This has the code:
index.css:
u1
{
list-style-type:none;
}
along with some code which applies to the li elements.
The other css document is for the rest of the site. I want to use lists for some of the other parts, but I'm having an issue. While the li elements are overwriting properly, I can't get u1 element to show the bullets in the rest of the site. I've tried using u1.a and u1.b , but that doesn't fix it.
main.css:
u1
{
list-style-type:circle
}
Try overwriting it by adding !important
u1
{
list-style-type:circle!important;
}
and/or add another CSS file with just this rule to the page you want to be different.
The element is ul as in UL not u1 and in u-one. I assume this is not a typo of the code because it's all over the place in your question.
CSS work by cascading and specificity. Having list style apply to other elements of your site might be as simple as adding a class:
ul.circle {
list-style-type: circle;
}
and then adding the same class to your element in the HTML document, as such:
<ul class="circle"></ul>
There are many different ways to override CSS, and I described them in an answer of sometime ago, but in your case this should be the easiest.
sorry to probably reiterate what was already said, but if you wanted to make your 'u-one' class, you should prepend a dot to it, so it is either a class:
.u1 {list-style-type: circle;}
And you will use it as a usual class, ie
<ul class="u1"> <li></li> </ul>
or use ul [UL] as a tag:
ul {list-style-type: circle;}
and all your UL lists will have this formatting.
The way you put it in your css will not work with html because the 'u1' tag does not exist.
But I'll need to see a snippet of your html to be sure.